v 1.0.1
v 1.0.1
v 1.0.1
Styleguide
Styleguide
Styleguide
Styleguide
Eleva Theme Documentation
Eleva Theme Documentation
Eleva Theme Documentation
Eleva Theme Documentation
The Eleva 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, Eleva's semantically driven color palette not only enhances visual appeal but also fortifies meaning, guiding users with intuitive cues and highlighting key information.
The Eleva 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, Eleva's semantically driven color palette not only enhances visual appeal but also fortifies meaning, guiding users with intuitive cues and highlighting key information.
Text
Text
Text
Text
Title 1
The most prominent headline on the website, used to capture attention and indicate primary importance.
The most prominent headline on the website, used to capture attention and indicate primary importance.
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.
A subheading used to emphasize secondary information or segment primary content.
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.
Used for tertiary content grouping or to introduce subsections within major sections.
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.
Suitable for quaternary content emphasis, often used for minor subheadings or intro texts.
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.
A general headline for articles, blog posts, or product descriptions. Not as prominent as titles.
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.
Specifically used for buttons across the website, ensuring consistency and emphasis on CTAs.
Specifically used for buttons across the website, ensuring consistency and emphasis on CTAs.
Paragraph Strong
Paragraph Strong
Paragraph Strong
A bolder version of the paragraph text, used to emphasize certain information within the content.
A bolder version of the paragraph text, used to emphasize certain information within the content.
A bolder version of the paragraph text, used to emphasize certain information within the content.
Paragraph
Paragraph
Standard body text used for general content, articles, product descriptions, etc.
Standard body text used for general content, articles, product descriptions, etc.
Standard body text used for general content, articles, product descriptions, etc.
Caption Strong
Caption Strong
Caption Strong
A bolder version of the caption text, suitable for emphasizing metadata or secondary information.
A bolder version of the caption text, suitable for emphasizing metadata or secondary information.
A bolder version of the caption text, suitable for emphasizing metadata or secondary information.
Caption
Caption
Caption
Smallest text, often used for footnotes, image captions, and secondary or tertiary metadata.
Smallest text, often used for footnotes, image captions, and secondary or tertiary metadata.
Smallest text, often used for footnotes, image captions, and secondary or tertiary metadata.
Colors
Colors
Colors
Colors
Content
Content
Content
Used for text
Used for text
Used for text
Content/Primary
Content/Primary
Content/Primary
Content/Secondary
Content/Secondary
Content/Secondary
Content/Tertiary
Content/Tertiary
Content/Tertiary
Content/Brand
Content/Brand
Content/Brand
Colors on Inverted or Dark Backgrounds
Colors on Inverted or Dark Backgrounds
Colors on Inverted or Dark Backgrounds
Content/Primary
Content/Primary
Content/Primary
Content/Secondary
Content/Secondary
Content/Secondary
Content/Tertiary
Content/Tertiary
Content/Tertiary
Content/Brand
Content/Brand
Content/Brand
Backgrounds
Backgrounds
Backgrounds
Used for backgrounds
Used for backgrounds
Used for backgrounds
Default
Default
Default
Inverted
Inverted
Inverted
Primary
Primary
Primary
Secondary
Secondary
Secondary
Tertiary
Tertiary
Tertiary
Brand
Brand
Brand
Borders
Borders
Borders
Used for borders
Used for borders
Used for borders
Primary
Primary
Primary
Secondary
Secondary
Secondary
Tertiary
Tertiary
Tertiary
Buttons
Buttons
Buttons
Buttons
Default
Default
Default
Inverted
Inverted
Inverted
Used on Background/Inverted
Used on Background/Inverted
Used on Background/Inverted