Styleguide

Colors

  • White

    $color_white

    #FEFEFE
  • Black

    $color_black

    #0E0E0E
  • Grey Light

    $color_greyLight

    #F8F7F6
  • Grey Light Background

    $color_greyLightBg

    #F7F7F7
  • Grey Dark

    $color_greyDark

    #393941
  • Blue Light

    $color_blueLight

    #2CABDA
  • Blue Light 2

    $color_blueLight2

    #6BC4E5
  • Blue Dark

    $color_blueDark

    #1C2735
  • Beige

    $color_beige

    #DDD6CE
  • Red

    $color_red

    #DA2C2C

Fonts

  • Proxima Nova

    $font_family-proximaNova

    "Proxima Nova", sans-serif
  • Poppins

    $font_family-poppins

    "Poppins", sans-serif
  • Calligraffitti

    $font_family-calligraffitti

    "Calligraffitti", sans-serif

Typography

  • .t-title.-f72

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • .t-title.-f64_80

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • .t-title.-f64_76

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • .t-title.-f56

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • .t-title.-f48

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • .t-title.-f36

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • .t-text.-f24_36

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • .t-text.-f24_32

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • .t-text.-f18

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • .t-text.-f16

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • .t-text.-f14

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • .t-text.-f12

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • .t-text.-fancy.-f24

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Utilities

  • FONT COLORS: (.-cWhite / .-cBlack /.-cGreyLight / .-cGrcGreyDarkeyLight / .-cBlueLight / .-cBlueLight / .-cBlueDark / .-cBeige)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • BACKGROUNDS: (.-bgWhite / .-bgBlack / .-bgGreyLight)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • TEXT ALIGNS (.-tLeft / .-tCenter /.-tRight)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • FONT WEIGHTS (.-fwLight / .-fwNormal /.-fwSbold /.-fwBold)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

  • OPACITIES (.-op85 / .-op75 / .-op5 )

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Buttons

  • .c-btn / .-secondary / .-secondary.-light

  • .c-btnNav.-prev / .-next / .-dark

  • .c-btnPlay / .-white

  • .c-hamburger / .-active

Links

Form elements

  • .f-label

  • .f-group.-input / .-big

  • .f-group.-textarea / .-big

  • .f-group.-checkbox

Lists

  • .c-list

    • Why do we want to use specific tools and not other ones?

    • Why do we want to carry out certain actions in a given order, and not arranged in a different way?

    • Why do we need so much time for each phase of the project?

Page elements

  • .c-testimonial / .-alt

    Textile One gave me great advice, right from the start.

    Since then, I've been totally satisfied with the quality and also with the simplicity of their system.

    Yassin Engels

    Operations Manager Rhein-Main Dunkin‘ Donuts

    Textile One gave me great advice, right from the start.

    Since then, I've been totally satisfied with the quality and also with the simplicity of their system.

    Yassin Engels

    Operations Manager Rhein-Main Dunkin‘ Donuts

  • .c-certificate

    Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque.

  • .c-client / .-tall / .-big

  • .c-benefit

    It's that simple!

    You’re now aware of the advantages of using our service platform. We’ll gladly explain the next steps.

  • .c-cta

    Can we work with you as well?

    We would be delighted to optimise your ordering process and find unique solutions for you.

    Let's talk?
  • .c-milestone

    2008

    During their studies, Sascha and Christian found Textile One GmbH in a 30-m2 office.

  • .c-milestone

    Christian Yaglioglu

    Operations Manager Rhein-Main