Style Guide

Create a consistent and cohesive website with this comprehensive web design style guide.

Typography

H1 - 22px - Helvetica

The quick brown fox jumps over the lazy dog

H2 - 22px - Helvetica

The quick brown fox jumps over the lazy dog

H3 - 22px - Helvetica

The quick brown fox jumps over the lazy dog

H4 - 22px - Helvetica

The quick brown fox jumps over the lazy dog

H5 - 22px - Helvetica
The quick brown fox jumps over the lazy dog
H6 - 22px - Helvetica
The quick brown fox jumps over the lazy dog
Small Text - 18px - Helvetica
The quick brown fox jumps over the lazy dog
Base Text - 22px - Helvetica
The quick brown fox jumps over the lazy dog
Large Text - 34px - Helvetica
The quick brown fox jumps over the lazy dog
Paragraph - 22px - Helvetica

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Rich Text

Rich Text - Helvetica

Innumerabilia dici possunt in hanc sententiam

Si quae forte-possumus. Cur post Tarentum ad Archytam? Tu vero, inquam, ducas licet, si sequetur; Certe, nisi voluptatem tanti aestimaretis. Est, ut dicis, inquam. Non risu potius quam oratione eiciendum?

  • Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret.
  • Quid iudicant sensus?
  • Nunc vides, quid faciat.
  • Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam.

Satis est ad hoc responsum

  1. Ait enim se, si uratur, Quam hoc suave! dicturum.
  2. Satis est ad hoc responsum.
  3. Beatum esse numquam probabis

Et fuga neque ut exercitatione

Quia, cum a Zenone, inquam, hoc magnifice tamquam ex oraculo editur: Virtus ad beate vivendum se ipsa contenta est, et Quare?

Uire earum ex debitis

At exercitationem eius. Qui distinctio delectus ea omnis incidunt aut minus distinctio qui ducimus libero! Sed consequatur quasi et quibusdam tenetur qui impedit Quis est neque deleniti ea dignissimos omnis.

Quis et quia

Et autem internos qui quod Quis et quia officiis eum quasi veniam. Aut quia ratione hic mollitia voluptate et modi cumque ut libero quaerat et velit voluptatem. Aut assumenda maiores eum modi quis et incidunt dolorem ad officiis voluptatibus.

voluptatem qui modi optio
  • Et magni molestiae et odit voluptate a beatae harum.
  • Aut ipsam autem aut amet enim et expedita quia.
  • Et ratione dolor qui molestias error.
  • Ut molestiae tempore 33 aliquam nobis qui officia quia.
  • Eos voluptatibus molestias eos magni odio et quidem quisquam

Buttons

Button
Button

Colours

Beige - #f5f5ef
Grey - #6c6c6c
Charcoal - ##161615