Styleguide
Resolva Theme Documentation
The Resolva 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, Resolva'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…)
Purple
Yellow
Cyan
Buttons
Default
Secondary