Living Styleguide

Lexware Living Styleguide

patterns and templates sortet in atoms, molecules and organisms.

Colors

  • brand
    $brand-color
    ( #CC0000 )
  • accent
    $accent-color
    ( #CC0000 )
  • hover-color
    $hover-color
    ( #DB4C4C )
  • sec-accent
    $second-accent-color
    ( #99B019 )
  • sec-hover-color
    $second-hover-color
    ( #ACC61C )
  • ui-color-prim
    $ui-color-primary
    ( #999 )
  • ui-color-sec
    $ui-color-secondary
    ( #333 )
  • ui-color-ter
    $ui-color-tertiary
    ( #666 )
  • ui-color-quat
    $ui-color-quaternary
    ( #CCCCCC )
  • ui-background-color
    $ui-background-color
    ( #F5F5F5 )
  • ui-color-plus-prim
    $ui-color-plus-primary
    ( #4799D5 )
  • ui-color-plus-sec
    $ui-color-plus-secondary
    ( #652B99 )
  • ui-color-plus-ter
    $ui-color-plus-tertiary
    ( #9E0152 )
  • ui-color-plus-quat
    $ui-color-plus-quaternary
    ( #F5BD4E )
  • ui-color-plus-quin
    $ui-color-plus-quinary
    ( #EB6005 )

Animations

Fade: Duration: 0.5s Easing: cubic-bezier(.22,.81,.01,.99); (Hover to see effect)
Movement: Duration: 0.5s Easing: cubic-bezier(.22,.81,.01,.99); (Hover to see effect)

Fonts

  • HaufeMerriweatherSans
  • HaufeMerriweather
  • HaufeMerriweatherSansItalic
  • HaufeMerriweatherItalic
  • HaufeMerriweatherSansBold
  • HaufeMerriweatherBold

Visibility

This text is hidden on smaller screens

This text is only visible on smaller screens

This text is hidden on medium screens only

This text is only visible on medium screens

This text is hidden on large screens

This text is only visible on large screens

Grid

Layout
Layout small
Layout tiny