v 1.0.1

v 1.0.1

v 1.0.1

Styleguide

Sparkle Theme Documentation

The Sparkle theme on Framer is a meticulously crafted template tailored for SaaS websites. Embracing both light and dark modes, it ensures optimal viewing comfort for users irrespective of their lighting preferences. Its responsive typographical scale effortlessly adapts to varying screen sizes, preserving content hierarchy across devices. Furthermore, Sparkle's semantically driven color palette not only enhances visual appeal but also fortifies meaning, guiding users with intuitive cues and highlighting key information.

Text

Title 1

The most prominent headline on the website, used to capture attention and indicate primary importance.

Title 2

A subheading used to emphasize secondary information or segment primary content.

Title 3

Used for tertiary content grouping or to introduce subsections within major sections.

Title 4

Suitable for quaternary content emphasis, often used for minor subheadings or intro texts.

Headline

A general headline for articles, blog posts, or product descriptions. Not as prominent as titles.

Button

Specifically used for buttons across the website, ensuring consistency and emphasis on CTAs.

Paragraph Strong

A bolder version of the paragraph text, used to emphasize certain information within the content.

Paragraph

Standard body text used for general content, articles, product descriptions, etc.

Caption Strong

A bolder version of the caption text, suitable for emphasizing metadata or secondary information.

Caption

Smallest text, often used for footnotes, image captions, and secondary or tertiary metadata.

Colors

Content

Used for text

Content/Primary

Content/Secondary

Content/Tertiary

Content/Brand

Colors on Inverted or Dark Backgrounds

Content/Primary

Content/Secondary

Content/Tertiary

Content/Brand

Backgrounds

Used for backgrounds

Default

Inverted

Primary

Secondary

Tertiary

Brand

Borders

Used for borders

Primary

Secondary

Tertiary

Non Semantic

Used as extra colors (icons, illustrations…)

Orange

Purple

Blue

Green

Dark green

Buttons

Buttons

Buttons

Buttons

Default

Inverted

Used on Background/Inverted

Default

Primary

Inverted

Used on Background/Inverted

Primary