Chapter 01
Foundations
This chapter defines the basic principles that shapes not only the Welcome Screens but the live app as a whole. It covers the live app's typography, color swatches, and guidelines on looking for & creating image assets.
Typography
The font used within the app is Inter, which was extracted from Element Plus' UI framework. However, Dosis was taken from the marketing site for the purpose of having a subhead also reflecting within product as well.
The size of the base text starts at 16px. To ensure readability across all desktop screens, the sizes are adjusted in accordance with the screen resolutions (1920, 1440, and 1280).
For Screen Size 1920 and above
add code hereFor Screen Size 1920 and above
add code hereImage Guidelines
-
01
Majority of the images on the Welcome Screen are screenshots of the app's dashboards and widgets. If the screenshots taken are blurry, reach out to the Design Team for help.
-
02
The only widgets that require custom asset is the Benefits Section.
Icon libraries you may explore are the following:
- thenounproject
- remixicon; or
- Ask the Design Team to look and edit for you
Colors
The palette below covers the core surface, text, and accent colors reused across the Welcome Screen and its components.
Screen Layout Guide
This chapter walks through how content is organized across the Welcome Screen — from the underlying grid system to how visual weight is distributed across sections.
Grids
Placeholder content — describes the column grid, gutters, and margins used to lay out Welcome Screen sections consistently across breakpoints.
Hierarchy of Importance
Placeholder content — describes how size, color, and placement are used to guide a viewer's attention through the page in order of priority.
Universal Measurements
Placeholder content — documents the shared spacing scale, radii, and sizing units applied consistently across every widget and layout.
Common Widget UI
This chapter breaks down the recurring widget patterns used to introduce new users to the app, including onboarding, benefits, and support resources.
Overview/Introductions
Placeholder content — covers how the app is introduced to first-time users on the Welcome Screen.
Key Benefits
Placeholder content — outlines how core product benefits are surfaced and prioritized for new users.
How to Setup
Placeholder content — walks through the setup widget pattern, including step numbering and completion states.
FAQs
Placeholder content — documents the accordion pattern used for frequently asked questions.
Technical Support
Placeholder content — describes how support contact options are presented within the Welcome Screen.
YouTube Video
Placeholder content — covers embedding guidance and aspect ratio rules for onboarding video content.
Onboarding Playlist
Placeholder content — describes the playlist widget used to surface a curated set of onboarding videos.
Rules to Remember
This chapter lists the hard restrictions and softer considerations to keep in mind whenever the Welcome Screen is modified or extended.
Restrictions
Placeholder content — lists the non-negotiable rules (e.g. locked brand colors, required disclaimers) that must never be changed.
Considerations
Placeholder content — lists softer guidance and trade-offs to weigh before introducing new sections or widgets.