Texts

Table of contents

• Evaluation
  • Main Website
  • Extensions
  • Events
  • Planet
  • Discourse
  • Developer Center
  • Wiki
  • Apps
  • Forty
  • Os
  • Circle
  • Release
• Mockups

Evaluation

#1 - Main Website

h1

Screenshot

Typography

• font-family: Source Sans Pro
• font-size: 36px
• font-weight: 600

Colors

• text-color: #4a86cf
• background-color: #ffffff

Spacing

• text-align: center
• margin: 0 0 20px
• line-height: 1.4/50.4px

h2

Screenshot

Typography

• font-family: Source Sans Pro
• font-size: 24px
• font-weight: 500

Colors

• text-color: #4a86cf
• background-color: #ffffff

Spacing

• line-height: 1.8/43.2px
• margin: 0 0 20px

h3

Screenshot

Typography

• font-family: Source Sans Pro
• font-size: 18px
• font-weight: 600

Colors

• text-color: #333
• background-color: #ffffff

Spacing

• line-height: 1.2/21.6px
• margin: 0 0 20px

Paragraph

Screenshot

Typography

• font-family: Source Sans Pro
• font-size: 16px

Colors

• text-color: #494949
• background-color: #ffffff

Spacing

• margin-top: 0px
• margin-right: 0px
• margin-bottom: 20px
• margin-left: 0px
• text-align: center
• padding: 0
• line-height: 24px

Paragraph

Screenshot

Elements

• Paragraph

Typography

• font-family: Source Sans Pro
• font-size: 16px

Colors

• text-color: #494949
• background-color: #ffffff

Spacing

• margin-top: 0px
• margin-right: 0px
• margin-bottom: 20px
• margin-left: 0px
• vertical-align: baseline
• text-align: start
• padding: 0
• line-height: 24px

#2 - Extensions

h3

Screenshot

Typography

• font-size: 1.3em/18.2px
• font-weight: bold/700
• font-family: Cantarell, "Droid Sans", Ubuntu, "DejaVu Sans", Arial, sans-serif

Colors

• color: #000
• background-color: #ffffff

Spacing

• line-height: 32px
• margin: 0
• display: inline-block

Paragraph

Screenshot

Typography

• font-family: Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial, sans-serif
• font-size: 16.8px

Colors

• text-color: #555

Spacing

• margin: 0.5em 32px 0.5em 36px
• overflow: auto
• white-space: pre-line
• line-height: 26.88px
• list-style-type: none

Paragraph

Screenshot

Elements

• Paragraph

Typography

• font-family: Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial, sans-serif
• font-size: 14px

Colors

• text-color: #555

Spacing

• margin-top: 0.4em
• margin-right: 0px
• margin-bottom: 1em
• margin-left: 0px
• line-height: 22.4px
• text-align: start

Paragraph

Screenshot

Elements

• Paragraph

Typography

• font-family: Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial, sans-serif
• font-size: 14px

Colors

• text-color: #555555
• background-color: #ffffff

Spacing

• margin: 0.4em 0 1em
• line-height: 22.4px

#3 - Events Portal

h1

Screenshot

Typography

• font-size: 1.7em/30.6px
• font-family: Roboto, sans-serif
• font-weight: bold/700

Colors

• color: #555
• background-color: #ffffff

Spacing

• margin-top: 0em
• margin-bottom: 1rem/14px
• line-height: 1.28571429em/39.3429px
• padding: 0em

h2

Screenshot

Typography

• font-weight: normal/40
• font-size: 1.6em/20.8px;
• font-family: 'Roboto Light', sans-serif

Colors

• color: #919191
• background-color: #fafafa

Spacing

• line-height: 26.7429px

h4

Screenshot

Typography

• font-weight: normal
• font-size: 18px
• font-family: 'Roboto Light', sans-serif

Colors

• color: #555

Spacing

• line-height: 1.28571429em/23.1429px
• margin-top: 20px
• margin-left: 40px
• padding: 0

Paragraph

Screenshot

Typography

• font-family: Roboto, sans serif
• font-size: 18px

Colors

• Color: #919191

Spacing

• margin: 0em 0em 1em
• line-height: 1.4285em

Paragraph

Screenshot

Typography

• font-family: 'Roboto', sans-serif
• font-size: 18x

Colors

• text-color: #919191
• background-color: #ffffff

Spacing

• margin: 0em 0em 1em
• line-height: 1.4285em

#4 - Planet

Paragraph

Screenshot

Elements

• Paragraph
• Link

Typography

• font-family: Source Sans Pro, Cantarell, Droid Sans, Ubuntu, DejaVu Sans, Arial, sans-serif
• font-size: 15px

Colors

• background-color: #000000
• text-color: #919191

Spacing

• margin-top: 0px;
• margin-right: 0px;
• margin-bottom: 10px
• margin-left: 0px
• line-height: 140%

Paragraph

Screenshot

Elements

• Paragraph
• Link

Typography

• font-family: Source Sans Pro, Cantarell, Droid Sans, Ubuntu, DejaVu Sans, Arial, sans-serif
• font-size: 15px

Colors

• background-color: #ffffff
• text-color: #555753

Spacing

• margin-top: 0px
• margin-right: 0px
• margin-bottom: 10px
• margin-left: 0px
• line-height: 1.42857

#5 - Discourse

None

#6 - Developer Center

h1

Screenshot

Typography

• font-weight: 300
• font-size: 24pt/32px
• font-family: Cantarell, -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif

Colors

• color: #ffffffcc
• background-color: #131416

Spacing

• margin-top: 1.75rem/31.5px
• margin-bottom: 1rem/18px
• line-height: 1.25/40px
• margin-right: -0.5rem/-9px
• margin-left: -0.5rem/-9px
• padding-left: 0.5rem/9px
• padding-right: 0.5rem/9px

h2

Screenshot

Typography

• font-weight: 800
• font-size: 17pt/22.6667px

Colors

• opacity: 0.7
• color: #ffffffcc
• background-color: #131416

Spacing

• margin-top: 1.75rem/31.5px
• margin-bottom: 0.5rem/9px
• line-height: 1.25/28.3333px
• margin-right: -0.5rem/-9px
• margin-left: -0.5rem/-9px
• padding-left: 0.5rem/9px
• padding-right: 0.5rem/9px

h2

Screenshot

Typography

• font-size: 18px
• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
• font-weight: 800

Colors

• color: #deddda
• background: #241f31

Spacing

• line-height: 1.25/33.75px
• margin-top: 90px/5rem
• margin-bottom: 36px/2rem

h3

Screenshot

Typography

• font-size: 1.17em/21.06px
• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif

Colors

• color: #f6f5f4
• background: #5e5c64

Spacing

• text-align: center
• margin-top: 1rem/18px
• margin-bottom: 0.5rem/9px
• font-weight: 800
• line-height: 1.25/26.325px
• margin-block-start: 1em
• margin-block-end: 1em

Paragraph

Screenshot

Elements

• Paragraph

Typography

• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
• font-size: 18px
• font-weight: 400

Colors

• text-Color: #deddda
• background-color: #241f31

Spacing

• text-align: center
• max-width: 30em
• margin: 1.5rem auto 3rem
• line-height: 1.6

Paragraph

Screenshot

Elements

• Paragraph

Typography

• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
• font-size: 18px
• font-weight: 400

Colors

• text-Color: #f6f5f4
• background-color: #5e5c64

Spacing

• padding-left: 1rem
• text-align: center
• margin-top: 0rem
• line-height: 1.6

Paragraph

Screenshot

On Hover

Typography

• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
• font-size: 18px
• font-weight: 400

Colors

• text-color: #ffffff
• background-color: #241f31

Spacing

• text-align: center
• padding: 1em
• line-height: 1.6

On Hover

• text-color: #1a5fba
• background-color: #292432

Paragraph

Screenshot

Typography

• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
• font-size: 12.6px
• font-weight: 400

Colors

• text-color: #ffffff
• background-color: #000000

Spacing

• margin: 0 0 1rem
• padding: 5rem 3rem 7rem
• text-align: center
• line-height: 1.6

Paragraph

Screenshot

Typography

• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
• font-size: 18px

Colors

• text-color: #ffffffd9f
• background-color: #131416

Spacing

• margin-top: 0.75rem
• margin-bottom: 0.75rem
• line-height: 1.5

#7 - Wiki

h1

Screenshot

Typography

• font-size: 2.4em/38.4px
• font-weight: 200
• font-family: 'Source Sans Pro', sans-serif

Colors

• color: #3f3f3f
• background-color: #000000

Spacing

• margin: 0px
• padding-top: 20px
• padding-bottom: 20px
• line-height: 1.4/53.76px

h2

Screenshot

Typography

• font-family: 'Source Sans Pro', sans-serif
• font-size: 1.5em/24px
• font-weight: normal/400

Colors

• color: #4a86cf
• background-color: #000000

Spacing

• margin: 0px
• padding-top: 20px
• padding-bottom: 10px
• line-height: 1.4/33.6px

h3

Screenshot

Typography

• font-size: 1.3em/20.8px
• font-weight: 300
• font-family: 'Source Sans Pro', sans-serif

Colors

• color: #3f3f3f
• background-color: #000000

Spacing

• margin: 0px
• padding-top: 20px
• padding-bottom: 10px
• line-height: 1.4/29.12px

h4

Screenshot

Typography

• font-size: 1.0em/16px
• font-weight: bold/700
• font-family: 'Source Sans Pro', sans-serif

Colors

• color: #808080
• background-color: #000000

Spacing

• margin: 0px
• padding-top: 20px
• padding-bottom: 10px
• line-height: 1.4/22.4px

Paragraph

Screenshot

Elements

• Paragraph

Typography

• font-family: 'Source Sans Pro', sans-serif
• font-size: 16px

Colors

• text-color: #ffffff
• background-color: #000000

Spacing

• line-height: 1.4em
• display: block
• margin-block-start: 1em
• margin-block-end: 1em
• margin-inline-start: 0px
• margin-inline-end: 0px

#8 - Apps

h1

Screenshot

Typography

• font-family: Cantarell, sans-serif
• font-size: 45px
• font-weight: 800

Colors

• color: #deddda
• background-color: #241f31

Spacing

• margin: 0 0 20px
• line-height: normal

h2

Screenshot

Typography

• font-size: 48px
• font-weight: 800
• font-family: Cantarell, sans-serif

Colors

• color: #deddda
• background-color: #2d283c

Spacing

• margin-top: 0
• margin-bottom: 16px

h4

Screenshot

Typography

• font-family: Cantarell, sans-serif
• font-size: 17px
• font-weight: 700

Colors

• color: #deddda
• background-color: #2d283c

Spacing

• margin: 0 0 3px
• line-height: normal

Paragraph

Screenshot

Typography

• font-family: Cantarell, sans-serif
• font-size: 17px

Colors

• Text: ##deddda
• Background: #2d283c
• link-color: #99C1F1

Spacing

• hyphens: auto
• font-family: Cantarell, sans-serif
• padding: 30px

#9 - Forty

h1

Screenshot

Typography

• font-size: 2.5rem/45px
• font-weight: 800
• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif

Colors

• color: #f6f5f4
• background: linear-gradient(68deg, #1c71d8 70%, #c061cb 100%)

Spacing

• margin: 0.5em/22.5px
• line-height: 1.25/56.25px
• letter-spacing: -0.01em
• word-spacing: -0.01em

h2

Screenshot

Typography

• font-weight: 300
• font-size: 260%/46.8px
• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif

Colors

• color: #f6f5f4
• background-color: #3d3846

Spacing

• margin: 4rem 0 0rem/72px
• line-height: 1.25/58.5px
• letter-spacing: -0.01em
• word-spacing: -0.01em

h3

Screenshot

Typography

• font-size: 130%/23.4px
• font-weight: 800
• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif

Colors

• color: #f6f5f4
• background-color: #3d3846

Spacing

• margin-top: 1rem/18px
• margin-bottom: 0.5rem/9px
• line-height: 1.25/29.25px
• letter-spacing: -0.01em
• word-spacing: -0.01em

h4

Screenshot

Typography

• font-weight: 800
• font-size: 18px
• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif

Colors

• color: #f6f5f4;
• background-color: #241f31

Spacing

• margin: 0 0 1.5rem/27px
• line-height: 1.25/22.5px
• letter-spacing: -0.01em
• word-spacing: -0.01em

Paragraph

Screenshot

Typography

• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
• font-weight: 400
• font-size: 18px

Colors

• text-color: #f6f5f4
• background-color: #3d3846

Spacing

• line-height: 1.6
• letter-spacing: -0.01em
• word-spacing: 0.01em
• margin: 1.5rem auto 3rem

Paragraph

Screenshot

Typography

• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
• font-weight: 400
• font-size: 18px

Colors

• text-color: #deddda
• background-color: #fff2

Spacing

• margin: 0.5rem 1rem 1rem
• line-height: 1.6
• letter-spacing: -0.01em
• word-spacing: -0.01em

Paragraph

Screenshot

Typography

• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
• font-weight: 400
• font-size: 18px

Colors

• text-color: #f6f5f4
• background-color: #3d3846

Spacing

• text-align: center
• max-width: 30em
• margin: 1.5rem auto 3rem
• margin: 0.5rem 1rem 1rem
• line-height: 1.6
• letter-spacing: -0.01em
• word-spacing: -0.01em

#10 - Os

h1

Screenshot

Typography

• font-size: 2.5rem/45px
• font-weight: 800
• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif

Colors

• color: #f6f5f4
• background: linear-gradient(90deg, #392955 0%, #3a6294 100%)

Spacing

• margin: 0 0 10px
• text-align: center
• line-height: 1.25/56.25px
• letter-spacing: -0.01em
• word-spacing: -0.01em

h3

Screenshot

Typography

• font-size: 1.4em/25.2px
• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif

Colors

• color: #f6f5f4
• background: linear-gradient(90deg, #392955 0%, #3a6294 100%)

Spacing

• margin: 0 0 10px
• font-weight: 800
• line-height: 1.25/31.5px
• letter-spacing: -0.01em
• word-spacing: -0.01em

Paragraph

Screenshot

Typography

• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
• font-weight: 400
• font-size: 18px

Colors

• text-color: #f6f5f4
• background-color: linear-gradient(90deg, #392955 0%, #3a6294 100%)

Spacing

• display: block
• max-width: 20em
• margin: 1.6rem auto 0.5rem
• text-align: center
• line-height: 1.6
• letter-spacing: -0.01em
• word-spacing: -0.01em

Paragraph

Screenshot

Typography

• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
• font-weight: 400
• font-size: 16.2px

Colors

• text-color: #f6f5f4
• background-color: linear-gradient(90deg, #392955 0%, #3a6294 100%)

Spacing

• text-align: center
• max-width: 28em
• margin: 1rem auto
• line-height: 1.6
• letter-spacing: -0.01em
• word-spacing: -0.01em

#11 - Circle

h2

Screenshot

Typography

• font-weight: 800
• font-size: 1.5em/27px
• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif

Colors

• color: #f6f5f4
• background: linear-gradient(90deg, #26a269 0%, #2ec27e 100%)

Spacing

• text-align: center
• margin: 5rem 0 2rem/90px 36px
• line-height: 1.25/33.75px
• letter-spacing: -0.01em
• word-spacing: -0.01em

h3

Screenshot

Typography

• font-size: 1.4em/25.2px
• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif

Colors

• color: #f6f5f4
• background-color: #3d3846

Spacing

• margin: 0 0 3rem/54px
• font-weight: 800
• line-height: 1.25/31.5px
• letter-spacing: -0.01em
• word-spacing: -0.01em

Paragraph

Screenshot

Typography

• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
• font-weight: 400
• font-size: 18px

Colors

• text-color: #f6f5f4
• background-color: linear-gradient(90deg, var(--green5) 0%, var(--green4) 100%)

Spacing

• text-align: center
• max-width: 30em
• margin: 1.5rem auto 3rem
• line-height: 1.6
• letter-spacing: -0.01em
• word-spacing: -0.01em

#12 - Release

Paragraph

Screenshot

Typography

• font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
• font-weight: 400
• font-size: 18px

Colors

• text-color: #ffffff

Spacing

• line-height: 1.6
• grid-column-start: main
• grid-column-end: main

Mockups!