Design System

An overview of commonly used components and styles.

Typography

All the heading levels and body paragraphs. Apply one of the following classes or copy an elements directly from here.

Head Display
Head Jumbo
Head Medium
Head Regular
Head Small

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.

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Buttons

Component, text style and size variations.

Form Inputs

Size and state variations for text inputs.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
UI Shapes

A list of all the UI components used throughout the website.

Public link sharing

Simply copy and share the URL so others not using Subly can see a preview of your video too.

s

Videos

All the videos stored on Webflow and used throughout the project. Please do not delete videos that are active.

Rich Text

The basic rich texts that are being used throughout the design.

Dummy text: Its function

Dummy text is text that is used in the publishing industry or by web designers to occupy the space which will later be filled with 'real' content.

This is required when, for example, the final text is not yet available. Dummy text is also known as 'fill text'. It is said that song composers of the past used dummy texts as lyrics when writing melodies in order to have a 'ready-made' text to sing with the melody.

Dummy texts have been in use by typesetters since the 16th century.
The usefulness of nonsensical content

Dummy text is also used to demonstrate the appearance of different typefaces and layouts, and in general the content of dummy text is nonsensical. Due to its widespread use as filler text for layouts, non-readability is of great importance: human perception is tuned to recognize certain patterns and repetitions in texts.

If the distribution of letters and 'words' is random, the reader will not be distracted from making a neutral judgement on the visual impact and readability of the typefaces (typography), or the distribution of text on the page (layout or type area).

For this reason, dummy text usually consists of a more or less random series of words or syllables. This prevents repetitive patterns from impairing the overall visual impression and facilitates the comparison of different typefaces.

  • Furthermore, it is advantageous when the dummy text is relatively realistic so that the layout impression of the final publication is not compromised. Incomprehensibility or readability? That is the question.
  • Furthermore, it is advantageous when the dummy text is relatively realistic so that the layout impression of the final publication is not compromised. Incomprehensibility or readability? That is the question.
  • Furthermore, it is advantageous when the dummy text is relatively realistic so that the layout impression of the final publication is not compromised. Incomprehensibility or readability? That is the question.
  • Furthermore, it is advantageous when the dummy text is relatively realistic so that the layout impression of the final publication is not compromised. Incomprehensibility or readability? That is the question.

The most well-known dummy text is the 'Lorem Ipsum', which is said to have originated in the 16th century. Lorem Ipsum is composed in a pseudo-Latin language which more or less corresponds to 'proper' Latin. It contains a series of real Latin words. This ancient dummy text is also incomprehensible, but it imitates the rhythm of most European languages in Latin script.

  1. Furthermore, it is advantageous when the dummy text is relatively realistic so that the layout impression of the final publication is not compromised. Incomprehensibility or readability? That is the question.
  2. Furthermore, it is advantageous when the dummy text is relatively realistic so that the layout impression of the final publication is not compromised. Incomprehensibility or readability? That is the question.
  3. Furthermore, it is advantageous when the dummy text is relatively realistic so that the layout impression of the final publication is not compromised. Incomprehensibility or readability? That is the question.
  4. Furthermore, it is advantageous when the dummy text is relatively realistic so that the layout impression of the final publication is not compromised. Incomprehensibility or readability? That is the question.
  5. Furthermore, it is advantageous when the dummy text is relatively realistic so that the layout impression of the final publication is not compromised. Incomprehensibility or readability? That is the question.

The advantage of its Latin origin and the relative meaninglessness of Lorum Ipsum is that the text does not attract attention to itself or distract the viewer's attention from the layout.

Image caption goes here

One disadvantage of Lorum Ipsum is that in Latin certain letters appear more frequently than others - which creates a distinct visual impression. Moreover, in Latin only words at the beginning of sentences are capitalized; this means that Lorem Ipsum cannot accurately represent, for example, German, in which all nouns are capitalized.

Thus, Lorem Ipsum has only limited suitability as a visual filler for German texts. If the fill text is intended to illustrate the characteristics of different typefaces, it sometimes makes sense to select texts containing the various letters and symbols specific to the output language.