Styleguide

Slide 1

Styleguide

Contact us

Contact us

    t: +44 (0)1925 849000 e: protex.marketing@datelgroup.com

    LinkedIn

    Grid

    12 columns max, 1280px grid, 20px gutter

    1 col

    1 col

    1 col

    1 col

    1 col

    1 col

    1 col

    1 col

    1 col

    1 col

    1 col

    1 col

    2 cols

    2 cols

    2 cols

    2 cols

    2 cols

    2 cols

    3 cols

    3 cols

    3 cols

    3 cols

    4 cols

    4 cols

    4 cols

    6 cols

    6 cols

    12 cols

    Pallette

    #000
    Primary

    #fff
    Secondary

    #ebebeb
    Tertiary

    #ed1c24
    Quaternary

    #2a378e
    Quinary

    #ed0f3e
    Senary

    Typography

    DINPro-Light - Headings

    Primary, 68px

    Secondary, 42px

    DINPro-Bold - Headings

    Primary, 68px

    Secondary, 42px

    DINPro-Light - Main copy - 23px.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptate distinctio reprehenderit, autem deleniti ad voluptatum eaque. Optio ea aperiam nisi distinctio nemo repellat, voluptate fugiat. Quidem neque illum, blanditiis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptate distinctio reprehenderit, autem deleniti ad voluptatum eaque. Optio ea aperiam nisi distinctio nemo repellat, voluptate fugiat. Quidem neque illum, blanditiis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptate distinctio reprehenderit, autem deleniti ad voluptatum eaque. Optio ea aperiam nisi distinctio nemo repellat, voluptate fugiat. Quidem neque illum, blanditiis!

    DINPro-Bold - CTAs - 16px.

    Scroll Down

    Forms

    Dividers

    Dashed

    - - -

    Thin

    Thick

    Alt

    Normal

    Large

    x-large

    Banners

    CTAs

    CTA Title

    CTA Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit labore.

    Button text
    CTA Title

    CTA Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit labore.

    Button text
    CTA Title, CTA Title, CTA Title

    CTA Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit labore.

    Button text

    Card's

    1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    4

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Icons


    icon-tie

    icon-scissor

    icon-balls

    icon-hanger

    icon-briefcase

    icon-people

    icon-bag

    angle-double-down

    angle-double-left

    angle-double-right

    icon-3rdparty

    icon-erp

    icon-wm

    icon-cp

    icon-200

    icon-cpm

    icon-wms

    icon-web