SCTCH Theme Factory Styleguide
Converted Icons
Note: set the cart indicator with --color-cart-indicator
stroke-x-circle
stroke-chevron-down
stroke-logout
stroke-tag
stroke-empty
stroke-chevron-up
stroke-file-text
stroke-chevron-right
stroke-arrow-right
stroke-speaker-high
stroke-share-ios
stroke-ruler
stroke-plus
stroke-check
stroke-speaker-mute
stroke-loader
stroke-x-mark
stroke-info-circle
stroke-copy
stroke-refresh
stroke-check-circle
stroke-play
stroke-chat
stroke-article
stroke-link-generic
stroke-arrow-up-right
stroke-keyboard-enter
stroke-trash
stroke-magnify
stroke-star
stroke-page
stroke-alert-circle
stroke-share-android
stroke-select
stroke-location
stroke-copy-check
stroke-sort
stroke-filter
stroke-globe
stroke-arrow-left
stroke-pause
stroke-header-modern-search
stroke-header-classic-user
stroke-header-modern-cart
stroke-header-classic-cart
stroke-header-modern-user
stroke-header-classic-basket
stroke-header-classic-search
stroke-header-modern-bag
stroke-header-classic-bag
stroke-header-modern-hamburger
stroke-header-classic-hamburger
stroke-header-modern-basket
stroke-minus
stroke-photo
stroke-chevron-left
Note: set the cart indicator with --color-cart-indicator
fill-play-circle
fill-media-video
fill-grid-4
fill-grid-1
fill-grid-2
fill-grid-3
fill-media-3d
fill-social-medium
fill-social-tumblr
fill-social-x
fill-social-vimeo
fill-social-instagram
fill-social-rss
fill-social-snapchat
fill-social-facebook
fill-social-pinterest
fill-social-youtube
fill-social-linkedin
fill-social-tiktok
fill-star
fill-grid-list
Colors
Accent Title
Main title
Limit title
Text Limit & Text midpoint
Lorem ipsum dolor sit amet with link color for contrast.
canvas-mix-x
5
Background: bg-canvas-mix-5
Text: text-canvas
10
Background: bg-canvas-mix-10
Text: text-canvas
20
Background: bg-canvas-mix-20
Text: text-canvas
30
Background: bg-canvas-mix-30
Text: text-canvas
40
Background: bg-canvas-mix-40
Text: text-canvas
50
Background: bg-canvas-mix-50
Text: text-canvas
60
Background: bg-canvas-mix-60
Text: text-content
70
Background: bg-canvas-mix-70
Text: text-content
80
Background: bg-canvas-mix-80
Text: text-content
90
Background: bg-canvas-mix-90
Text: text-content
95
Background: bg-canvas-mix-95
Text: text-content
content-mix-x
5
Background: bg-content-mix-5
Text: text-content
10
Background: bg-content-mix-10
Text: text-content
20
Background: bg-content-mix-20
Text: text-content
30
Background: bg-content-mix-30
Text: text-content
40
Background: bg-content-mix-40
Text: text-content
50
Background: bg-content-mix-50
Text: text-content
60
Background: bg-content-mix-60
Text: text-canvas
70
Background: bg-content-mix-70
Text: text-canvas
80
Background: bg-content-mix-80
Text: text-canvas
90
Background: bg-content-mix-90
Text: text-canvas
95
Background: bg-content-mix-95
Text: text-canvas
secondary-mix-x
5
Background: bg-secondary-mix-5
Text: text-secondary
10
Background: bg-secondary-mix-10
Text: text-secondary
20
Background: bg-secondary-mix-20
Text: text-secondary
30
Background: bg-secondary-mix-30
Text: text-secondary
40
Background: bg-secondary-mix-40
Text: text-secondary
50
Background: bg-secondary-mix-50
Text: text-secondary
60
Background: bg-secondary-mix-60
Text: text-canvas
70
Background: bg-secondary-mix-70
Text: text-canvas
80
Background: bg-secondary-mix-80
Text: text-canvas
90
Background: bg-secondary-mix-90
Text: text-canvas
95
Background: bg-secondary-mix-95
Text: text-canvas
primary-mix-x
5
Background: bg-primary-mix-5
Text: text-primary
10
Background: bg-primary-mix-10
Text: text-primary
20
Background: bg-primary-mix-20
Text: text-primary
30
Background: bg-primary-mix-30
Text: text-primary
40
Background: bg-primary-mix-40
Text: text-primary
50
Background: bg-primary-mix-50
Text: text-primary
60
Background: bg-primary-mix-60
Text: text-primary-opposite
70
Background: bg-primary-mix-70
Text: text-primary-opposite
80
Background: bg-primary-mix-80
Text: text-primary-opposite
90
Background: bg-primary-mix-90
Text: text-primary-opposite
95
Background: bg-primary-mix-95
Text: text-primary-opposite
primary-opposite-mix-x
5
Background: bg-primary-opposite-mix-5
Text: text-primary-opposite
10
Background: bg-primary-opposite-mix-10
Text: text-primary-opposite
20
Background: bg-primary-opposite-mix-20
Text: text-primary-opposite
30
Background: bg-primary-opposite-mix-30
Text: text-primary-opposite
40
Background: bg-primary-opposite-mix-40
Text: text-primary-opposite
50
Background: bg-primary-opposite-mix-50
Text: text-primary-opposite
60
Background: bg-primary-opposite-mix-60
Text: text-primary
70
Background: bg-primary-opposite-mix-70
Text: text-primary
80
Background: bg-primary-opposite-mix-80
Text: text-primary
90
Background: bg-primary-opposite-mix-90
Text: text-primary
95
Background: bg-primary-opposite-mix-95
Text: text-primary
line-subtle
line
line-bold
line-mix-subtle
line-mix
line-mix-bold
Accent Title
Main title
Limit title
Text Limit & Text midpoint
Lorem ipsum dolor sit amet with link color for contrast.
canvas-mix-x
5
Background: bg-canvas-mix-5
Text: text-canvas
10
Background: bg-canvas-mix-10
Text: text-canvas
20
Background: bg-canvas-mix-20
Text: text-canvas
30
Background: bg-canvas-mix-30
Text: text-canvas
40
Background: bg-canvas-mix-40
Text: text-canvas
50
Background: bg-canvas-mix-50
Text: text-canvas
60
Background: bg-canvas-mix-60
Text: text-content
70
Background: bg-canvas-mix-70
Text: text-content
80
Background: bg-canvas-mix-80
Text: text-content
90
Background: bg-canvas-mix-90
Text: text-content
95
Background: bg-canvas-mix-95
Text: text-content
content-mix-x
5
Background: bg-content-mix-5
Text: text-content
10
Background: bg-content-mix-10
Text: text-content
20
Background: bg-content-mix-20
Text: text-content
30
Background: bg-content-mix-30
Text: text-content
40
Background: bg-content-mix-40
Text: text-content
50
Background: bg-content-mix-50
Text: text-content
60
Background: bg-content-mix-60
Text: text-canvas
70
Background: bg-content-mix-70
Text: text-canvas
80
Background: bg-content-mix-80
Text: text-canvas
90
Background: bg-content-mix-90
Text: text-canvas
95
Background: bg-content-mix-95
Text: text-canvas
secondary-mix-x
5
Background: bg-secondary-mix-5
Text: text-secondary
10
Background: bg-secondary-mix-10
Text: text-secondary
20
Background: bg-secondary-mix-20
Text: text-secondary
30
Background: bg-secondary-mix-30
Text: text-secondary
40
Background: bg-secondary-mix-40
Text: text-secondary
50
Background: bg-secondary-mix-50
Text: text-secondary
60
Background: bg-secondary-mix-60
Text: text-canvas
70
Background: bg-secondary-mix-70
Text: text-canvas
80
Background: bg-secondary-mix-80
Text: text-canvas
90
Background: bg-secondary-mix-90
Text: text-canvas
95
Background: bg-secondary-mix-95
Text: text-canvas
primary-mix-x
5
Background: bg-primary-mix-5
Text: text-primary
10
Background: bg-primary-mix-10
Text: text-primary
20
Background: bg-primary-mix-20
Text: text-primary
30
Background: bg-primary-mix-30
Text: text-primary
40
Background: bg-primary-mix-40
Text: text-primary
50
Background: bg-primary-mix-50
Text: text-primary
60
Background: bg-primary-mix-60
Text: text-primary-opposite
70
Background: bg-primary-mix-70
Text: text-primary-opposite
80
Background: bg-primary-mix-80
Text: text-primary-opposite
90
Background: bg-primary-mix-90
Text: text-primary-opposite
95
Background: bg-primary-mix-95
Text: text-primary-opposite
primary-opposite-mix-x
5
Background: bg-primary-opposite-mix-5
Text: text-primary-opposite
10
Background: bg-primary-opposite-mix-10
Text: text-primary-opposite
20
Background: bg-primary-opposite-mix-20
Text: text-primary-opposite
30
Background: bg-primary-opposite-mix-30
Text: text-primary-opposite
40
Background: bg-primary-opposite-mix-40
Text: text-primary-opposite
50
Background: bg-primary-opposite-mix-50
Text: text-primary-opposite
60
Background: bg-primary-opposite-mix-60
Text: text-primary
70
Background: bg-primary-opposite-mix-70
Text: text-primary
80
Background: bg-primary-opposite-mix-80
Text: text-primary
90
Background: bg-primary-opposite-mix-90
Text: text-primary
95
Background: bg-primary-opposite-mix-95
Text: text-primary
line-subtle
line
line-bold
line-mix-subtle
line-mix
line-mix-bold
Accent Title
Main title
Limit title
Text Limit & Text midpoint
Lorem ipsum dolor sit amet with link color for contrast.
canvas-mix-x
5
Background: bg-canvas-mix-5
Text: text-canvas
10
Background: bg-canvas-mix-10
Text: text-canvas
20
Background: bg-canvas-mix-20
Text: text-canvas
30
Background: bg-canvas-mix-30
Text: text-canvas
40
Background: bg-canvas-mix-40
Text: text-canvas
50
Background: bg-canvas-mix-50
Text: text-canvas
60
Background: bg-canvas-mix-60
Text: text-content
70
Background: bg-canvas-mix-70
Text: text-content
80
Background: bg-canvas-mix-80
Text: text-content
90
Background: bg-canvas-mix-90
Text: text-content
95
Background: bg-canvas-mix-95
Text: text-content
content-mix-x
5
Background: bg-content-mix-5
Text: text-content
10
Background: bg-content-mix-10
Text: text-content
20
Background: bg-content-mix-20
Text: text-content
30
Background: bg-content-mix-30
Text: text-content
40
Background: bg-content-mix-40
Text: text-content
50
Background: bg-content-mix-50
Text: text-content
60
Background: bg-content-mix-60
Text: text-canvas
70
Background: bg-content-mix-70
Text: text-canvas
80
Background: bg-content-mix-80
Text: text-canvas
90
Background: bg-content-mix-90
Text: text-canvas
95
Background: bg-content-mix-95
Text: text-canvas
secondary-mix-x
5
Background: bg-secondary-mix-5
Text: text-secondary
10
Background: bg-secondary-mix-10
Text: text-secondary
20
Background: bg-secondary-mix-20
Text: text-secondary
30
Background: bg-secondary-mix-30
Text: text-secondary
40
Background: bg-secondary-mix-40
Text: text-secondary
50
Background: bg-secondary-mix-50
Text: text-secondary
60
Background: bg-secondary-mix-60
Text: text-canvas
70
Background: bg-secondary-mix-70
Text: text-canvas
80
Background: bg-secondary-mix-80
Text: text-canvas
90
Background: bg-secondary-mix-90
Text: text-canvas
95
Background: bg-secondary-mix-95
Text: text-canvas
primary-mix-x
5
Background: bg-primary-mix-5
Text: text-primary
10
Background: bg-primary-mix-10
Text: text-primary
20
Background: bg-primary-mix-20
Text: text-primary
30
Background: bg-primary-mix-30
Text: text-primary
40
Background: bg-primary-mix-40
Text: text-primary
50
Background: bg-primary-mix-50
Text: text-primary
60
Background: bg-primary-mix-60
Text: text-primary-opposite
70
Background: bg-primary-mix-70
Text: text-primary-opposite
80
Background: bg-primary-mix-80
Text: text-primary-opposite
90
Background: bg-primary-mix-90
Text: text-primary-opposite
95
Background: bg-primary-mix-95
Text: text-primary-opposite
primary-opposite-mix-x
5
Background: bg-primary-opposite-mix-5
Text: text-primary-opposite
10
Background: bg-primary-opposite-mix-10
Text: text-primary-opposite
20
Background: bg-primary-opposite-mix-20
Text: text-primary-opposite
30
Background: bg-primary-opposite-mix-30
Text: text-primary-opposite
40
Background: bg-primary-opposite-mix-40
Text: text-primary-opposite
50
Background: bg-primary-opposite-mix-50
Text: text-primary-opposite
60
Background: bg-primary-opposite-mix-60
Text: text-primary
70
Background: bg-primary-opposite-mix-70
Text: text-primary
80
Background: bg-primary-opposite-mix-80
Text: text-primary
90
Background: bg-primary-opposite-mix-90
Text: text-primary
95
Background: bg-primary-opposite-mix-95
Text: text-primary
line-subtle
line
line-bold
line-mix-subtle
line-mix
line-mix-bold
Accent Title
Main title
Limit title
Text Limit & Text midpoint
Lorem ipsum dolor sit amet with link color for contrast.
canvas-mix-x
5
Background: bg-canvas-mix-5
Text: text-canvas
10
Background: bg-canvas-mix-10
Text: text-canvas
20
Background: bg-canvas-mix-20
Text: text-canvas
30
Background: bg-canvas-mix-30
Text: text-canvas
40
Background: bg-canvas-mix-40
Text: text-canvas
50
Background: bg-canvas-mix-50
Text: text-canvas
60
Background: bg-canvas-mix-60
Text: text-content
70
Background: bg-canvas-mix-70
Text: text-content
80
Background: bg-canvas-mix-80
Text: text-content
90
Background: bg-canvas-mix-90
Text: text-content
95
Background: bg-canvas-mix-95
Text: text-content
content-mix-x
5
Background: bg-content-mix-5
Text: text-content
10
Background: bg-content-mix-10
Text: text-content
20
Background: bg-content-mix-20
Text: text-content
30
Background: bg-content-mix-30
Text: text-content
40
Background: bg-content-mix-40
Text: text-content
50
Background: bg-content-mix-50
Text: text-content
60
Background: bg-content-mix-60
Text: text-canvas
70
Background: bg-content-mix-70
Text: text-canvas
80
Background: bg-content-mix-80
Text: text-canvas
90
Background: bg-content-mix-90
Text: text-canvas
95
Background: bg-content-mix-95
Text: text-canvas
secondary-mix-x
5
Background: bg-secondary-mix-5
Text: text-secondary
10
Background: bg-secondary-mix-10
Text: text-secondary
20
Background: bg-secondary-mix-20
Text: text-secondary
30
Background: bg-secondary-mix-30
Text: text-secondary
40
Background: bg-secondary-mix-40
Text: text-secondary
50
Background: bg-secondary-mix-50
Text: text-secondary
60
Background: bg-secondary-mix-60
Text: text-canvas
70
Background: bg-secondary-mix-70
Text: text-canvas
80
Background: bg-secondary-mix-80
Text: text-canvas
90
Background: bg-secondary-mix-90
Text: text-canvas
95
Background: bg-secondary-mix-95
Text: text-canvas
primary-mix-x
5
Background: bg-primary-mix-5
Text: text-primary
10
Background: bg-primary-mix-10
Text: text-primary
20
Background: bg-primary-mix-20
Text: text-primary
30
Background: bg-primary-mix-30
Text: text-primary
40
Background: bg-primary-mix-40
Text: text-primary
50
Background: bg-primary-mix-50
Text: text-primary
60
Background: bg-primary-mix-60
Text: text-primary-opposite
70
Background: bg-primary-mix-70
Text: text-primary-opposite
80
Background: bg-primary-mix-80
Text: text-primary-opposite
90
Background: bg-primary-mix-90
Text: text-primary-opposite
95
Background: bg-primary-mix-95
Text: text-primary-opposite
primary-opposite-mix-x
5
Background: bg-primary-opposite-mix-5
Text: text-primary-opposite
10
Background: bg-primary-opposite-mix-10
Text: text-primary-opposite
20
Background: bg-primary-opposite-mix-20
Text: text-primary-opposite
30
Background: bg-primary-opposite-mix-30
Text: text-primary-opposite
40
Background: bg-primary-opposite-mix-40
Text: text-primary-opposite
50
Background: bg-primary-opposite-mix-50
Text: text-primary-opposite
60
Background: bg-primary-opposite-mix-60
Text: text-primary
70
Background: bg-primary-opposite-mix-70
Text: text-primary
80
Background: bg-primary-opposite-mix-80
Text: text-primary
90
Background: bg-primary-opposite-mix-90
Text: text-primary
95
Background: bg-primary-opposite-mix-95
Text: text-primary
line-subtle
line
line-bold
line-mix-subtle
line-mix
line-mix-bold
Accent Title
Main title
Limit title
Text Limit & Text midpoint
Lorem ipsum dolor sit amet with link color for contrast.
canvas-mix-x
5
Background: bg-canvas-mix-5
Text: text-canvas
10
Background: bg-canvas-mix-10
Text: text-canvas
20
Background: bg-canvas-mix-20
Text: text-canvas
30
Background: bg-canvas-mix-30
Text: text-canvas
40
Background: bg-canvas-mix-40
Text: text-canvas
50
Background: bg-canvas-mix-50
Text: text-canvas
60
Background: bg-canvas-mix-60
Text: text-content
70
Background: bg-canvas-mix-70
Text: text-content
80
Background: bg-canvas-mix-80
Text: text-content
90
Background: bg-canvas-mix-90
Text: text-content
95
Background: bg-canvas-mix-95
Text: text-content
content-mix-x
5
Background: bg-content-mix-5
Text: text-content
10
Background: bg-content-mix-10
Text: text-content
20
Background: bg-content-mix-20
Text: text-content
30
Background: bg-content-mix-30
Text: text-content
40
Background: bg-content-mix-40
Text: text-content
50
Background: bg-content-mix-50
Text: text-content
60
Background: bg-content-mix-60
Text: text-canvas
70
Background: bg-content-mix-70
Text: text-canvas
80
Background: bg-content-mix-80
Text: text-canvas
90
Background: bg-content-mix-90
Text: text-canvas
95
Background: bg-content-mix-95
Text: text-canvas
secondary-mix-x
5
Background: bg-secondary-mix-5
Text: text-secondary
10
Background: bg-secondary-mix-10
Text: text-secondary
20
Background: bg-secondary-mix-20
Text: text-secondary
30
Background: bg-secondary-mix-30
Text: text-secondary
40
Background: bg-secondary-mix-40
Text: text-secondary
50
Background: bg-secondary-mix-50
Text: text-secondary
60
Background: bg-secondary-mix-60
Text: text-canvas
70
Background: bg-secondary-mix-70
Text: text-canvas
80
Background: bg-secondary-mix-80
Text: text-canvas
90
Background: bg-secondary-mix-90
Text: text-canvas
95
Background: bg-secondary-mix-95
Text: text-canvas
primary-mix-x
5
Background: bg-primary-mix-5
Text: text-primary
10
Background: bg-primary-mix-10
Text: text-primary
20
Background: bg-primary-mix-20
Text: text-primary
30
Background: bg-primary-mix-30
Text: text-primary
40
Background: bg-primary-mix-40
Text: text-primary
50
Background: bg-primary-mix-50
Text: text-primary
60
Background: bg-primary-mix-60
Text: text-primary-opposite
70
Background: bg-primary-mix-70
Text: text-primary-opposite
80
Background: bg-primary-mix-80
Text: text-primary-opposite
90
Background: bg-primary-mix-90
Text: text-primary-opposite
95
Background: bg-primary-mix-95
Text: text-primary-opposite
primary-opposite-mix-x
5
Background: bg-primary-opposite-mix-5
Text: text-primary-opposite
10
Background: bg-primary-opposite-mix-10
Text: text-primary-opposite
20
Background: bg-primary-opposite-mix-20
Text: text-primary-opposite
30
Background: bg-primary-opposite-mix-30
Text: text-primary-opposite
40
Background: bg-primary-opposite-mix-40
Text: text-primary-opposite
50
Background: bg-primary-opposite-mix-50
Text: text-primary-opposite
60
Background: bg-primary-opposite-mix-60
Text: text-primary
70
Background: bg-primary-opposite-mix-70
Text: text-primary
80
Background: bg-primary-opposite-mix-80
Text: text-primary
90
Background: bg-primary-opposite-mix-90
Text: text-primary
95
Background: bg-primary-opposite-mix-95
Text: text-primary
line-subtle
line
line-bold
line-mix-subtle
line-mix
line-mix-bold
Accent Title
Main title
Limit title
Text Limit & Text midpoint
Lorem ipsum dolor sit amet with link color for contrast.
canvas-mix-x
5
Background: bg-canvas-mix-5
Text: text-canvas
10
Background: bg-canvas-mix-10
Text: text-canvas
20
Background: bg-canvas-mix-20
Text: text-canvas
30
Background: bg-canvas-mix-30
Text: text-canvas
40
Background: bg-canvas-mix-40
Text: text-canvas
50
Background: bg-canvas-mix-50
Text: text-canvas
60
Background: bg-canvas-mix-60
Text: text-content
70
Background: bg-canvas-mix-70
Text: text-content
80
Background: bg-canvas-mix-80
Text: text-content
90
Background: bg-canvas-mix-90
Text: text-content
95
Background: bg-canvas-mix-95
Text: text-content
content-mix-x
5
Background: bg-content-mix-5
Text: text-content
10
Background: bg-content-mix-10
Text: text-content
20
Background: bg-content-mix-20
Text: text-content
30
Background: bg-content-mix-30
Text: text-content
40
Background: bg-content-mix-40
Text: text-content
50
Background: bg-content-mix-50
Text: text-content
60
Background: bg-content-mix-60
Text: text-canvas
70
Background: bg-content-mix-70
Text: text-canvas
80
Background: bg-content-mix-80
Text: text-canvas
90
Background: bg-content-mix-90
Text: text-canvas
95
Background: bg-content-mix-95
Text: text-canvas
secondary-mix-x
5
Background: bg-secondary-mix-5
Text: text-secondary
10
Background: bg-secondary-mix-10
Text: text-secondary
20
Background: bg-secondary-mix-20
Text: text-secondary
30
Background: bg-secondary-mix-30
Text: text-secondary
40
Background: bg-secondary-mix-40
Text: text-secondary
50
Background: bg-secondary-mix-50
Text: text-secondary
60
Background: bg-secondary-mix-60
Text: text-canvas
70
Background: bg-secondary-mix-70
Text: text-canvas
80
Background: bg-secondary-mix-80
Text: text-canvas
90
Background: bg-secondary-mix-90
Text: text-canvas
95
Background: bg-secondary-mix-95
Text: text-canvas
primary-mix-x
5
Background: bg-primary-mix-5
Text: text-primary
10
Background: bg-primary-mix-10
Text: text-primary
20
Background: bg-primary-mix-20
Text: text-primary
30
Background: bg-primary-mix-30
Text: text-primary
40
Background: bg-primary-mix-40
Text: text-primary
50
Background: bg-primary-mix-50
Text: text-primary
60
Background: bg-primary-mix-60
Text: text-primary-opposite
70
Background: bg-primary-mix-70
Text: text-primary-opposite
80
Background: bg-primary-mix-80
Text: text-primary-opposite
90
Background: bg-primary-mix-90
Text: text-primary-opposite
95
Background: bg-primary-mix-95
Text: text-primary-opposite
primary-opposite-mix-x
5
Background: bg-primary-opposite-mix-5
Text: text-primary-opposite
10
Background: bg-primary-opposite-mix-10
Text: text-primary-opposite
20
Background: bg-primary-opposite-mix-20
Text: text-primary-opposite
30
Background: bg-primary-opposite-mix-30
Text: text-primary-opposite
40
Background: bg-primary-opposite-mix-40
Text: text-primary-opposite
50
Background: bg-primary-opposite-mix-50
Text: text-primary-opposite
60
Background: bg-primary-opposite-mix-60
Text: text-primary
70
Background: bg-primary-opposite-mix-70
Text: text-primary
80
Background: bg-primary-opposite-mix-80
Text: text-primary
90
Background: bg-primary-opposite-mix-90
Text: text-primary
95
Background: bg-primary-opposite-mix-95
Text: text-primary
line-subtle
line
line-bold
line-mix-subtle
line-mix
line-mix-bold
Accent Title
Main title
Limit title
Text Limit & Text midpoint
Lorem ipsum dolor sit amet with link color for contrast.
canvas-mix-x
5
Background: bg-canvas-mix-5
Text: text-canvas
10
Background: bg-canvas-mix-10
Text: text-canvas
20
Background: bg-canvas-mix-20
Text: text-canvas
30
Background: bg-canvas-mix-30
Text: text-canvas
40
Background: bg-canvas-mix-40
Text: text-canvas
50
Background: bg-canvas-mix-50
Text: text-canvas
60
Background: bg-canvas-mix-60
Text: text-content
70
Background: bg-canvas-mix-70
Text: text-content
80
Background: bg-canvas-mix-80
Text: text-content
90
Background: bg-canvas-mix-90
Text: text-content
95
Background: bg-canvas-mix-95
Text: text-content
content-mix-x
5
Background: bg-content-mix-5
Text: text-content
10
Background: bg-content-mix-10
Text: text-content
20
Background: bg-content-mix-20
Text: text-content
30
Background: bg-content-mix-30
Text: text-content
40
Background: bg-content-mix-40
Text: text-content
50
Background: bg-content-mix-50
Text: text-content
60
Background: bg-content-mix-60
Text: text-canvas
70
Background: bg-content-mix-70
Text: text-canvas
80
Background: bg-content-mix-80
Text: text-canvas
90
Background: bg-content-mix-90
Text: text-canvas
95
Background: bg-content-mix-95
Text: text-canvas
secondary-mix-x
5
Background: bg-secondary-mix-5
Text: text-secondary
10
Background: bg-secondary-mix-10
Text: text-secondary
20
Background: bg-secondary-mix-20
Text: text-secondary
30
Background: bg-secondary-mix-30
Text: text-secondary
40
Background: bg-secondary-mix-40
Text: text-secondary
50
Background: bg-secondary-mix-50
Text: text-secondary
60
Background: bg-secondary-mix-60
Text: text-canvas
70
Background: bg-secondary-mix-70
Text: text-canvas
80
Background: bg-secondary-mix-80
Text: text-canvas
90
Background: bg-secondary-mix-90
Text: text-canvas
95
Background: bg-secondary-mix-95
Text: text-canvas
primary-mix-x
5
Background: bg-primary-mix-5
Text: text-primary
10
Background: bg-primary-mix-10
Text: text-primary
20
Background: bg-primary-mix-20
Text: text-primary
30
Background: bg-primary-mix-30
Text: text-primary
40
Background: bg-primary-mix-40
Text: text-primary
50
Background: bg-primary-mix-50
Text: text-primary
60
Background: bg-primary-mix-60
Text: text-primary-opposite
70
Background: bg-primary-mix-70
Text: text-primary-opposite
80
Background: bg-primary-mix-80
Text: text-primary-opposite
90
Background: bg-primary-mix-90
Text: text-primary-opposite
95
Background: bg-primary-mix-95
Text: text-primary-opposite
primary-opposite-mix-x
5
Background: bg-primary-opposite-mix-5
Text: text-primary-opposite
10
Background: bg-primary-opposite-mix-10
Text: text-primary-opposite
20
Background: bg-primary-opposite-mix-20
Text: text-primary-opposite
30
Background: bg-primary-opposite-mix-30
Text: text-primary-opposite
40
Background: bg-primary-opposite-mix-40
Text: text-primary-opposite
50
Background: bg-primary-opposite-mix-50
Text: text-primary-opposite
60
Background: bg-primary-opposite-mix-60
Text: text-primary
70
Background: bg-primary-opposite-mix-70
Text: text-primary
80
Background: bg-primary-opposite-mix-80
Text: text-primary
90
Background: bg-primary-opposite-mix-90
Text: text-primary
95
Background: bg-primary-opposite-mix-95
Text: text-primary
line-subtle
line
line-bold
line-mix-subtle
line-mix
line-mix-bold
Fonts
heading 1
heading 2
heading 3
heading 4
heading 5
heading 6
heading 7
heading 8
heading 9
heading 10
heading 11
heading 12
heading 13
heading 14
heading 15
body 1
body 2
body 3
body 4
body 5
body 6
body 7
body 8
body 9
body 10
body 11
body 12
body 13
body 14
body 15
accent 1
accent 2
accent 3
accent 4
accent 5
accent 6
accent 7
accent 8
accent 9
accent 10
accent 11
accent 12
accent 13
accent 14
accent 15
Typographic Elements
Typographic elements in prose wrapper
Introduction
The World Wide Web has come a long way since its inception. This article takes you through a journey back in time, chronicling the major milestones that shaped the Internet as we know it today.
The Beginning
It all started with Tim Berners-Lee, a British physicist, who envisioned a space where information could be accessed by anyone, anywhere.
The First Website
The first website was simple, a far cry from the interactive, media-rich sites we encounter today. It provided basic information and links to further resources.
"Vague, but exciting..." - Mike Sendall, reviewing Tim Berners-Lee's proposal for the World Wide Web.
The Dot-com Boom
With increasing accessibility and the launch of web browsers like Netscape, a new era of the Internet began.
Companies quickly moved online, giving rise to the .com era.
Web 2.0: The Social Web
Wikipedia, YouTube, and Facebook — what they have in common is the user-generated content, marking the transition to Web 2.0.
Key Innovations
Conclusion
The web has come a long way, from serving simple text-based pages to becoming an indispensable part of our daily lives. As technology continues to evolve, one can only wonder what the future holds for the World Wide Web.
Form Elements
scheme-error
Text input fields
Small
Medium
Large
Disabled
w/ value
w/o label
w/ error
Error!
w/ success
Success!
Textarea Fields
Small
Medium
Large
Textarea Input w/ Value
Range Fields
$
-
$
Select Fields
Small
Medium
Large
Disabled Select
Select w/ value
Custom Select Fields
Small
Small
- Small
- First
- Second
- Third
Medium
Medium
- Medium
- First
- Second
- Third
Large
Large
- Large
- First
- Second
- Third
X-Large
X-Large
- X-Large
- First
- Second
- Third
Disabled
Disabled
- Disabled
- First
- Second
- Third
w/ value
w/ value
- First
- Second
- Third
Custom Select
Small
- Small
- First
- Second
- Third
Medium
- Medium
- First
- Second
- Third
Large
- Large
- First
- Second
- Third
X-Large
- X-Large
- First
- Second
- Third
Disabled
- Disabled
- First
- Second
- Third
w/ value
- First
- Second
- Third
Radio Fields / Checkboxes
Buttons
Primary
Secondary
Black
White
Canvas
Content
Links
Primary
Secondary
Black
White
Canvas
Content
Inline
The first website was simple, a far cry from the interactive , media-rich sites we encounter today. It provided basic information and links to further resources.
Swatches
id is required
id is required
id is required
id is required
Cards
LG
MD
Mutaciones complejas
From
$10
SM
Mutaciones complejas
From
$10
XS
Mutaciones complejas
From
$10
LG
Hella camión de comida vegana se vende fuera de schlitz vertiente
Read more
By
Gideon Baldridge
on
Barba de Austin antes de que vendieran XOXO. Stumptown yr pour-over salud goth, a cuadros vicio lo-fi meditación vegana destilería lumbersexual. Taxidermia migas marfa, sriracha...
