Typography

Fonts

Serif

Etiam finibus diam quis auctor imperdiet. Proin dignissim rhoncus erat sit amet congue. Ut in consectetur dui, ac mattis leo. Aliquam bibendum vel nibh non pulvinar. Integer tempor auctor enim tristique ultricies. Aliquam ac consequat arcu, vel dapibus urna. Pellentesque consequat arcu ex, vel tristique erat egestas non. Fusce fermentum dignissim faucibus. Pellentesque sed consectetur elit.

Sans Serif

Vivamus mauris nulla, condimentum ut diam sed, tincidunt aliquam leo. Quisque sodales sem a ligula placerat suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam auctor aliquet ligula ac porttitor.

This is a heading

Here is some body copy

Color Contrast

Focus

Etiam finibus diam quis auctor imperdiet. Proin dignissim rhoncus erat sit amet congue. Ut in consectetur dui, ac mattis leo. Aliquam bibendum vel nibh non pulvinar. Integer tempor auctor enim tristique ultricies. Aliquam ac consequat arcu, vel dapibus urna. Pellentesque consequat arcu ex, vel tristique erat egestas non. Fusce fermentum dignissim faucibus. Pellentesque sed consectetur elit.

Secondary Focus

Vivamus mauris nulla, condimentum ut diam sed, tincidunt aliquam leo. Quisque sodales sem a ligula placerat suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam auctor aliquet ligula ac porttitor.

This is a heading

Here is some body copy

Here is another line example

and another in a layout to show how this could work

Details

Line height & baseline

Etiam finibus diam quis auctor imperdiet. Proin dignissim rhoncus erat sit amet congue. Ut in consectetur dui, ac mattis leo. Aliquam bibendum vel nibh non pulvinar. Integer tempor auctor enim tristique ultricies. Aliquam ac consequat arcu, vel dapibus urna. Pellentesque consequat arcu ex, vel tristique erat egestas non. Fusce fermentum dignissim faucibus. Pellentesque sed consectetur elit.




Colors

Pallete

Grayscale

Etiam finibus diam quis auctor imperdiet. Proin dignissim rhoncus erat sit amet congue. Ut in consectetur dui, ac mattis leo. Aliquam bibendum vel nibh non pulvinar. Integer tempor auctor enim tristique ultricies. Aliquam ac consequat arcu, vel dapibus urna. Pellentesque consequat arcu ex, vel tristique erat egestas non. Fusce fermentum dignissim faucibus. Pellentesque sed consectetur elit.

Vivamus mauris nulla, condimentum ut diam sed, tincidunt aliquam leo. Quisque sodales sem a ligula placerat suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam auctor aliquet ligula ac porttitor.

#111111

@colorGray1

#222222

@colorGray2

#333333

@colorGray3

#444444

@colorGray4

#555555

@colorGray5

#666666

@colorGray6

#777777

@colorGray7

#888888

@colorGray8

#999999

@colorGray9

#aaaaaa

@colorGray10

#bbbbbb

@colorGray11

#cccccc

@colorGray12

#dddddd

@colorGray13

#eeeeee

@colorGray14

#f9f9f9

@colorGray15





Color

Etiam finibus diam quis auctor imperdiet. Proin dignissim rhoncus erat sit amet congue. Ut in consectetur dui, ac mattis leo. Aliquam bibendum vel nibh non pulvinar. Integer tempor auctor enim tristique ultricies. Aliquam ac consequat arcu, vel dapibus urna. Pellentesque consequat arcu ex, vel tristique erat egestas non. Fusce fermentum dignissim faucibus. Pellentesque sed consectetur elit.

Vivamus mauris nulla, condimentum ut diam sed, tincidunt aliquam leo. Quisque sodales sem a ligula placerat suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam auctor aliquet ligula ac porttitor.

#3C6AFF

@colorBlue1

#294AB6

@colorBlue2

#00B28C

@colorGreen1

#006750

@colorGreen2





Warning Colors

Etiam finibus diam quis auctor imperdiet. Proin dignissim rhoncus erat sit amet congue. Ut in consectetur dui, ac mattis leo. Aliquam bibendum vel nibh non pulvinar. Integer tempor auctor enim tristique ultricies. Aliquam ac consequat arcu, vel dapibus urna. Pellentesque consequat arcu ex, vel tristique erat egestas non. Fusce fermentum dignissim faucibus. Pellentesque sed consectetur elit.

#E50000

@colorRed1

#920000

@colorRed2

#FF4500

@colorOrange1

#C22800

@colorOrange2

#FFB500

@colorOrange1

#BA7A00

@colorYellow2





Themes

Day mode

Etiam finibus diam quis auctor imperdiet. Proin dignissim rhoncus erat sit amet congue. Ut in consectetur dui, ac mattis leo. Aliquam bibendum vel nibh non pulvinar. Integer tempor auctor enim tristique ultricies. Aliquam ac consequat arcu, vel dapibus urna. Pellentesque consequat arcu ex, vel tristique erat egestas non. Fusce fermentum dignissim faucibus. Pellentesque sed consectetur elit.

#333333
Body Copy

#aaaaaa
Placeholder text

#eeeeee
Modal dialog background





Night mode

Etiam finibus diam quis auctor imperdiet. Proin dignissim rhoncus erat sit amet congue. Ut in consectetur dui, ac mattis leo. Aliquam bibendum vel nibh non pulvinar. Integer tempor auctor enim tristique ultricies. Aliquam ac consequat arcu, vel dapibus urna. Pellentesque consequat arcu ex, vel tristique erat egestas non. Fusce fermentum dignissim faucibus. Pellentesque sed consectetur elit.

#333333
Body Copy

#aaaaaa
Placeholder text

#eeeeee
Modal dialog background





Iconography

Design

Etiam finibus diam quis auctor imperdiet. Proin dignissim rhoncus erat sit amet congue. Ut in consectetur dui, ac mattis leo. Aliquam bibendum vel nibh non pulvinar. Integer tempor auctor enim tristique ultricies. Aliquam ac consequat arcu, vel dapibus urna. Pellentesque consequat arcu ex, vel tristique erat egestas non. Fusce fermentum dignissim faucibus. Pellentesque sed consectetur elit.






Utility icons

magnifyingGlass.svg

close.svg

watchlist.svg

funnel.svg

printer.svg

clock.svg

dice.svg

move.svg

cog.svg



Moderation Icons

close.svg

funnel.svg

clock.svg





Design details

Lorem ipsum

Ut fringilla sapien nec neque efficitur, id posuere augue molestie. Curabitur a consectetur elit. Donec imperdiet eros mattis ante ultricies maximus. Nam blandit faucibus augue eu tempor. Duis malesuada arcu ac tortor convallis, eget aliquet nisl suscipit. Aliquam auctor velit sit amet vehicula consequat. Cras in molestie nulla, id finibus metus. Nunc non neque viverra, vulputate massa sit amet, ultrices sapien. Aliquam mollis posuere lectus eget dictum. Donec at sollicitudin mi. Morbi varius est a ex tempus ultrices. Phasellus eu mollis urna. Etiam a viverra lorem. Integer vel lacus dapibus, posuere dolor scelerisque, mollis risus. Pellentesque quis scelerisque dolor. Proin convallis sapien sapien, non hendrerit elit venenatis id.
















Lorem ipsum

Ut fringilla sapien nec neque efficitur, id posuere augue molestie. Curabitur a consectetur elit. Donec imperdiet eros mattis ante ultricies maximus. Nam blandit faucibus augue eu tempor. Duis malesuada arcu ac tortor convallis, eget aliquet nisl suscipit. Aliquam auctor velit sit amet vehicula consequat. Cras in molestie nulla, id finibus metus. Nunc non neque viverra, vulputate massa sit amet, ultrices sapien. Aliquam mollis posuere lectus eget dictum. Donec at sollicitudin mi. Morbi varius est a ex tempus ultrices. Phasellus eu mollis urna. Etiam a viverra lorem. Integer vel lacus dapibus, posuere dolor scelerisque, mollis risus. Pellentesque quis scelerisque dolor. Proin convallis sapien sapien, non hendrerit elit venenatis id.