TYPO3 Colors

  • TYPO3 Key Color Hex: #ff8700 RGB: 255/135/0 CMYK: 0/56/100/0 Pantone: Orange 021C
  • Support Orange light Hex: #ff9f33 RGB: 255/153/38 CMYK: 0/40/85/0
  • Support Orange dark Hex: #e67a00 RGB: 230/122/0 CMYK: 0/47/100/10
  • Marker Orange Hex: #ffd095 RGB: 255/208/149 CMYK: 0/23/46/10
  • White Hex: #ffffff RGB: 255/255/255 CMYK: 0/0/0/0
  • Grey superlight Hex: #f4f4f4 RGB: 244/244/244 CMYK: 0/0/0/8
  • Grey light Hex: #b9b9b9 RGB: 185/185/185 CMYK: 0/0/0/27 Pantone: Cool Gray 5
  • Grey medium Hex: #8c8c8c RGB: 140/140/140 CMYK: 0/0/0/45 Pantone: Cool Gray 8
  • Grey dark Hex: #515151 RGB: 81/81/81 CMYK: 0/0/0/68 Pantone: Cool Gray 11
  • Black Hex: #000000 RGB: 0/0/0 CMYK: 0/0/0/100 Pantone: Black C

Message Colors

  • Valid Message green Hex: #5abc55 RGB: 90/188/85
  • Warning Message yellow Hex: #ffc800 RGB: 255/2000/0
  • Error Message red Hex: #dd123d RGB: 221/18/61
  • Information Message blue Hex: #0080ff RGB: 0/128/255

Fonts

Primary font: "Source Sans Pro", "Helvetica", "Arial", sans-serif;

Primary font italic: "Source Sans Pro", "Helvetica", "Arial", sans-serif;

Primary font bold: "Source Sans Pro", "Helvetica", "Arial", sans-serif;

Headings

h1 Title bold

h2 Title bold

h3 Title bold

h4 Title bold

h5 Title bold

 

h1 Title regular

h2 Title regular

h3 Title regular

h4 Title regular

h5 Title regular

Paragraph

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Inline Elements

This is a TYPO3 text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The TYPO3 mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y

Date And Time

Preformatted Text

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 

Hr


Hr TYPO3


Blockquote TYPO3

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Unordered

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item

Ordered

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item

Definition

Definition List
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
And it gets a definition too, which is this line.

Landscape 4x3

4x3 Image

Landscape 16x9

16x9 Image

Square

Square Image

Avatar

Avatar Avatar

Icons

 

Loading Icon

Favicon Neutral

Favicon TYPO3

TYPO3 Logo Dos

TYPO3 Logo Donts

Text Fields

Select Menu

Checkbox

Checkbox *

Radio Buttons

Radio

Buttons

Button

Alternate Button

Disabled Button

Text Button

TYPO3 Buttons

Table

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

Byline

Address

Company Name
1234 Main St.
Anywhere, 101010, CA
U.S.A
+1.888.123.4567

Heading Group

This is the heading group's main heading

This is the heading group's subheading

Blockquote With Citation

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Quote Source

Intro Text

The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.

Figure With Caption

4x3 Image
This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.

Comment Form

Alert Neutral

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Alert Error

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Alert Valid

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Alert Warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Alert Information

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam