Style Guide
This is a set of guidelines and strategies specifically created for RightLife.
“I love how HealthCam provides insights into my health that I can monitor regularly. It’s empowering to stay on top of my wellness so easily.”
"HealthCam is a game-changer! In just 30 seconds, I get a complete health check-up from my phone. It’s fast, accurate, and so convenient!”
“I love how HealthCam provides insights into my health that I can monitor regularly. It’s empowering to stay on top of my wellness so easily.”
"HealthCam is a game-changer! In just 30 seconds, I get a complete health check-up from my phone. It’s fast, accurate, and so convenient!”
We have covered it all
Structure Classes
Defined and flexible core structure we can use on all or most pages.
Headings
HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look.
Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Text Classes
Text classes when typography style doesn't match the default HTML tag.
Text Sizes
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present on your website.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Text Styles
text-style-strikethrough
text-style-italic
text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
Sample text is being used as a placeholder.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Text Weights
Text Alignments
Colors
Manage recurring text and background colors.
Text Colors
Background Colors
Max widths
Use the max-width CSS property to contain inner content to a maximum width.
Paddings
Utility spacing system - padding classes. [padding-direction] + [padding-size].
Direction Classes
Size Classes
Margins
Utility spacing system - padding classes. [margin-direction] + [margin-size].
Direction Classes
Size Classes
Spacers
Unified spacer system for the project.
Icons
Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
Useful utility systems
Utility classes we like to use in most of our projects to build faster.
Webflow elements
Native Webflow elements with Client-First classes applied.
Example of a form component using Folders
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Your Stairway to Sustainable
Health and Happiness
Find your happy way to good health.
By doing the simple stuff right.
By not pushing yourself beyond your extreme.
By allowing the odd lapse.
Because at the end of the day, you're only healthy if you're happy.
One right step leads to another.
MindAudit
Uncover what’s affecting your peace.
Take the first step to better understand your mental health with a series of contextualized and clinically verified assessments. Based on your results, get curated content and personalized guidance that meet your mental health needs.
HealthAudit
Elevate your health with every question.
Get an in-depth understanding of your potential health risks, including diabetes, heart disease and cholesterol. Receive personalized guidance from highly skilled experts on how to take charge of your health.
VoiceScan
Reveal the unseen behind your voice.
Get insights on your mental well-being based on a short sample of your speech. Learn about the different components of your voice, their correlation with your mental state, and receive personalized tips to relieve stress.
HealthCam
See beyond the surface.
Gain a detailed physiological evaluation of your overall well-being through a simple face scan. Find out common health parameters such as blood pressure, BMI and stress index within seconds.
MindAudit
Uncover what’s affecting your peace.
Take the first step to better understand your mental health with a series of contextualized and clinically verified assessments. Based on your results, get curated content and personalized guidance that meet your mental health needs.
HealthAudit
Elevate your health with every question.
Get an in-depth understanding of your potential health risks, including diabetes, heart disease and cholesterol. Receive personalized guidance from highly skilled experts on how to take charge of your health.
HealthCam
See beyond the surface.
Gain a detailed physiological evaluation of your overall well-being through a simple face scan. Find out common health parameters such as blood pressure, BMI and stress index within seconds.
VoiceScan
Reveal the unseen behind your voice.
Get insights on your mental well-being based on a short sample of your speech. Learn about the different components of your voice, their correlation with your mental state, and receive personalized tips to relieve stress.
HealthCam
See beyond the surface.
Gain a detailed physiological evaluation of your overall well-being through a simple face scan. Find out common health parameters such as blood pressure, BMI and stress index within seconds.
VoiceScan
Reveal the unseen behind your voice.
Get insights on your mental well-being based on a short sample of your speech. Learn about the different components of your voice, their correlation with your mental state, and receive personalized tips to relieve stress.
HealthAudit
Elevate your health with every question.
Get an in-depth understanding of your potential health risks, including diabetes, heart disease and cholesterol. Receive personalized guidance from highly skilled experts on how to take charge of your health.
MindAudit
Uncover what’s affecting your peace.
Take the first step to better understand your mental health with a series of contextualized and clinically verified assessments. Based on your results, get curated content and personalized guidance that meet your mental health needs.
HealthCam
See beyond the surface.
Gain a detailed physiological evaluation of your overall well-being through a simple face scan. Find out common health parameters such as blood pressure, BMI and stress index within seconds.
VoiceScan
Reveal the unseen behind your voice.
Get insights on your mental well-being based on a short sample of your speech. Learn about the different components of your voice, their correlation with your mental state, and receive personalized tips to relieve stress.
MindAudit
Uncover what’s affecting your peace.
Take the first step to better understand your mental health with a series of contextualized and clinically verified assessments. Based on your results, get curated content and personalized guidance that meet your mental health needs.
HealthAudit
Elevate your health with every question.
Get an in-depth understanding of your potential health risks, including diabetes, heart disease and cholesterol. Receive personalized guidance from highly skilled experts on how to take charge of your health.
HealthCam
See beyond the surface.
Gain a detailed physiological evaluation of your overall well-being through a simple face scan. Find out common health parameters such as blood pressure, BMI and stress index within seconds.
VoiceScan
Reveal the unseen behind your voice.
Get insights on your mental well-being based on a short sample of your speech. Learn about the different components of your voice, their correlation with your mental state, and receive personalized tips to relieve stress.
MindAudit
Uncover what’s affecting your peace.
Take the first step to better understand your mental health with a series of contextualized and clinically verified assessments. Based on your results, get curated content and personalized guidance that meet your mental health needs.
HealthAudit
Elevate your health with every question.
Get an in-depth understanding of your potential health risks, including diabetes, heart disease and cholesterol. Receive personalized guidance from highly skilled experts on how to take charge of your health.