Design System

Jump to Sections

Styles

Typography

Headings

H1 Simplicty Theme

H2 Simplicty Theme

H3 Simplicty Theme

H4 Simplicty Theme

H5 Simplicty Theme
H6 Simplicty Theme

Paragraph

I’m baby enamel pin helvetica activated charcoal same tousled bodega boys literally meditation venmo next level scenester prism. Raclette celiac same lumbersexual swag. Street art drinking vinegar thundercats pitchfork jianbing affogato you probably haven’t heard of them occupy.

Fashion axe franzen cliche cray pork belly taxidermy semiotics viral palo santo. Locavore franzen venmo twee four dollar toast man bun gochujang, ramps hammock air plant swag.

Extra Small Font

I’m baby enamel pin helvetica activated charcoal same tousled bodega boys.

<p class="sim-font-xs">...</p>

Small Font

I’m baby enamel pin helvetica activated charcoal same tousled bodega boys.

<p class="sim-font-sm">...</p>

Medium Font

I’m baby enamel pin helvetica activated charcoal same tousled bodega boys.

<p class="sim-font-md">...</p>

Large Font

I’m baby enamel pin helvetica activated charcoal same tousled bodega boys.

<p class="sim-font-lg">...</p>

Extra Large Font

I’m baby enamel pin helvetica activated charcoal same tousled bodega boys.

<p class="sim-font-xl">...</p>

Buttons

Primary Button

<Template name="element-button" title="visit home page" url="{Field url}" target="_blank" class="default" />

Alt Button

<Template name="element-button" title="visit home page" url="{Field url}" target="_blank" class="alt" />

Messages

Hello, this is a default message!

<Template name="element-message" class="default" text="Hello, this is a default message!" button="true" title="visit home page" url="/" />

Hello, this is a success message!

<Template name="element-message" class="success" text="Hello, this is a success message!" button="true" title="visit home page" url="/" />

Hello, this is an error message!

<Template name="element-message" class="error" text="Hello, this is an error message!" button="true" title="visit home page" url="/" />

Promo Table

Simplicity
Theme
Squarespace
Personal
Professional website design
Growth optimisation
Business automation*
Professional email address
Email marketing setup
Unlimited bandwidth
Unlimited contributors
Advanced website metrics
Active security management
Kiwi owned business
<div class="sim-table promo"> <table>...</table> </div>

Boxes

<div class="sim-container-sm sim-box sim-scheme-light sim-py-16 sim-px-4 sim-mt-16"> ... </div>
<div class="sim-container-sm sim-box sim-scheme-dark sim-py-16 sim-px-4 sim-mt-16"> ... </div>
<div class="sim-container-sm sim-box sim-scheme-promo sim-py-16 sim-px-4 sim-mt-16"> ... </div>

Schemes

Light Color Scheme

Class: sim-scheme-light

Dark Color Scheme

Class: sim-scheme-dark

Promo Color Scheme

Class: sim-scheme-promo

Containers

Full-width container

Extra large container

Large container

Medium container

Small container

Extra small container

Nested containers align perfectly on mobile!

Full-width container

Extra large container

Large container

Medium container

Small container

Extra small container

Sections

Banners

Just an image caption

Fancy Banner

Simple websites with a splash of creativity

<Template name="section-banner" sid="662ccb89890a4" class="one" />

Simple Banner

Simple websites with a splash of creativity

<Template name="section-banner" sid="662ccc68de35a" class="two" />

Posts - Example 1

I'm Baby Direct Trade Mixtape

I'm baby celiac austin vibecession hexagon fanny pack biodiesel.

I'm Baby Direct Trade Mixtape

I'm baby celiac austin vibecession hexagon fanny pack biodiesel.

I'm Baby Direct Trade Mixtape

I'm baby celiac austin vibecession hexagon fanny pack biodiesel.

<Template name="section-posts" post="post" taxonomy="category" terms="blog" count="3" orderby="date" order="desc" exclude="0" columns="3" layout="1" slider="false" scheme="default" />

Posts - Example 2

I'm Baby Direct Trade Mixtape

I'm baby celiac austin vibecession hexagon fanny pack biodiesel.

I'm Baby Direct Trade Mixtape

I'm baby celiac austin vibecession hexagon fanny pack biodiesel.

<Template name="section-posts" post="post" taxonomy="category" terms="blog" count="2" orderby="date" order="desc" exclude="0" columns="1" layout="2" slider="false" scheme="dark" />

Posts - Example 3

I'm Baby Direct Trade Mixtape

I'm baby celiac austin vibecession hexagon fanny pack biodiesel.

I'm Baby Direct Trade Mixtape

I'm baby celiac austin vibecession hexagon fanny pack biodiesel.

I'm Baby Direct Trade Mixtape

I'm baby celiac austin vibecession hexagon fanny pack biodiesel.

I'm Baby Direct Trade Mixtape

I'm baby celiac austin vibecession hexagon fanny pack biodiesel.

<Template name="section-posts" post="post" taxonomy="category" terms="blog" count="3" orderby="date" order="desc" exclude="0" columns="1" layout="1" slider="2" scheme="dark" />

Featured Post - Example 1

I'm Baby Direct Trade Mixtape

I'm baby celiac austin vibecession hexagon fanny pack biodiesel.

I'm Baby Direct Trade Mixtape

I'm baby celiac austin vibecession hexagon fanny pack biodiesel.

I'm Baby Direct Trade Mixtape

I'm baby celiac austin vibecession hexagon fanny pack biodiesel.

<Template name="section-featured-post" count="3" columns="1" layout="1" align="center" slider="1" scheme="default" />

Featured Post - Example 2

I'm Baby Direct Trade Mixtape

I'm baby celiac austin vibecession hexagon fanny pack biodiesel.

I'm Baby Direct Trade Mixtape

I'm baby celiac austin vibecession hexagon fanny pack biodiesel.

I'm Baby Direct Trade Mixtape

I'm baby celiac austin vibecession hexagon fanny pack biodiesel.

<Template name="section-featured-post" count="3" columns="1" layout="2" align="center" slider="1" scheme="dark" />

Services

Just Another Title

Just Another Subtitle

I’m baby celiac austin vibecession hexagon fanny pack biodiesel asymmetrical keffiyeh pork belly.

Just Another Title

Just Another Subtitle

I’m baby celiac austin vibecession hexagon fanny pack biodiesel asymmetrical keffiyeh pork belly.

Just Another Title

Just Another Subtitle

I’m baby celiac austin vibecession hexagon fanny pack biodiesel asymmetrical keffiyeh pork belly.

<Template name="section-services" count="12" sid="662ccec55e177" />

Showcase

Just Another Title

Just Another Subtitle

I’m baby celiac austin vibecession hexagon fanny pack biodiesel asymmetrical keffiyeh pork belly.

Just Another Title

Just Another Subtitle

I’m baby celiac austin vibecession hexagon fanny pack biodiesel asymmetrical keffiyeh pork belly.

Just Another Title

Just Another Subtitle

I’m baby celiac austin vibecession hexagon fanny pack biodiesel asymmetrical keffiyeh pork belly.

Just Another Title

Just Another Subtitle

I’m baby celiac austin vibecession hexagon fanny pack biodiesel asymmetrical keffiyeh pork belly.

<Template name="section-showcase" count="12" sid="662cd1038e787" />

Recommended

<Template name="section-recommended" count="12" sid="662cd31ddb1fd" />

Team

Sally

Just Another Title

I'm baby celiac austin vibecession hexagon fanny pack biodiesel asymmetrical keffiyeh pork belly.

Mike

Just Another Title

I'm baby celiac austin vibecession hexagon fanny pack biodiesel asymmetrical keffiyeh pork belly.

Amy

Just Another Title

I'm baby celiac austin vibecession hexagon fanny pack biodiesel asymmetrical keffiyeh pork belly.

<Template name="section-team" count="12" sid="662cd690a3298" />

Testimonials

I’m baby sriracha organic direct trade, Brooklyn squid succulents selfies meditation cupping keytar migas.

John Taylor

Left Handed Screwdrivers

<Template name="section-testimonials" count="12" sid="662cd80d37a15" />

Accordion

  • Just Another Title

    I’m baby sriracha organic direct trade, Brooklyn squid succulents selfies meditation cupping keytar migas. Tousled raw denim listicle cliche, hammock craft beer bespoke tote bag selvage meggings next level leggings vexillologist.

  • Just Another Title

    I’m baby sriracha organic direct trade, Brooklyn squid succulents selfies meditation cupping keytar migas. Tousled raw denim listicle cliche, hammock craft beer bespoke tote bag selvage meggings next level leggings vexillologist.

  • Just Another Title

    I’m baby sriracha organic direct trade, Brooklyn squid succulents selfies meditation cupping keytar migas. Tousled raw denim listicle cliche, hammock craft beer bespoke tote bag selvage meggings next level leggings vexillologist.

  • Just Another Title

    I’m baby sriracha organic direct trade, Brooklyn squid succulents selfies meditation cupping keytar migas. Tousled raw denim listicle cliche, hammock craft beer bespoke tote bag selvage meggings next level leggings vexillologist.

<Template name="section-accordion" count="12" sid="662cd9226ac25" />

Documents

<Template name="element-document" sid="65b5afa9ecbe9" />