As your websites grow larger and more complex, having a consistent set of styles
will help them stay cohesive and enjoyable for users! It also helps as you
start working with other developers, as you can have a consistent reference
for how your website should be built.
*Design systems help to document the visual vocabulary and reusable
components of a large website.
These are some examples of color palettes and combinations one can use
when designing a website. These can range from lightness, saturation and
hue gradation to ranging between two to multiple colors
(ie. Temperature: Reds to Blues).
#ff0000
#ff2200
#ff4400
#ff6600
#ff8800
#ffaa00
#ffcc00
#ffee00
#00ffff
#00e1ff
#00c3ff
#00a6ff
#0088ff
#006aff
#004cff
#002aff
#aaff00
#80ff00
#55ff00
#2bff00
#00ff2a
#00ff55
#00ff80
#00ffaa
#ffffff
#e6e6e6
#bfbfbf
#999999
#737373
#4d4d4d
#262626
#000000
Imported from Google
A font is a graphical representation of text that may include a different typeface, point size, weight, color or design. The goal in this section is to demonstrate the various styles that you intend to use for each font.
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
The text style is a resource that specifies text attributes, including the font, size, line spacing, font style, text alignment, and text and background colors.
P: Paragraph