Web-based marketing software application
This app uses an 8px unit. All spaces are a multiple of 8px:
8px16px24px32px48px64px96px128px
When it comes to max widths, arbitrary values can be used.
For font sizes, the rem unit should be used.
The scale is:
1rem1.25rem1.5rem2rem
Because the base font size is 16px, this works out in pixels to:
16px20px24px32px
Devices :
This app uses a desktop first approach by picking a series of breakpoints.
A breakpoint is a specific viewport width that lets us segment all devices into a small set of possible experiences.
Any device under the specified breakpoint will be put in the same bucket, and can be styled separately.
Colors :
By default we use a light mode first approach.
To detect if the user has requested dark color theme use media queries as follows :
@media (prefers-color-scheme: dark)
Animations :
Start without animations, and enable them if the user wishes.
By switching it up so that the transition is set from within a media query, we ensure that the animation is disabled by default for users on browsers/devices that don't support this property.
@media (prefers-reduced-motion: no-preference)