MAX IV style guide web

1st Level

Main nav link

2nd Level

Sub Nav link

An ac&ve link

Main nav link

Sub Nav link

An ac&ve sublink

Main nav link Sub Nav link

/ Breadcrumb trail / An ac8ve Link / An ac8ve sublink

THIRD & FOURTH LEVEL SUB NAVIGATION

3rd Level links

3rd Level links

A sub naviga8on link with children

A sub naviga8on link with children

A sub naviga&on link with children

A sub naviga8on link

A sub naviga8on link

4th Level links

A sub naviga8on link A sub naviga8on link

A selected sub naviga&on link A sub naviga8on link

3rd Level links

A selected child link A child naviga8on link A child naviga8on link A child naviga8on link A sub naviga8on link A sub naviga8on link A sub naviga8on link

3rd Level links A sub naviga&on link with children 4th Level links A child naviga8on link A selected child link A selected child nav link with children 5th Level links A child naviga8on link A selected child link A child naviga8on link A child naviga8on link A child naviga8on link A sub naviga8on link A sub naviga8on link A sub naviga8on link

MAIN COLORS

GREEN

ORANGE

COOL GRAY

RGB:

130-190-0

RGB:

254-169-1

RGB:

110-110-110

HEX:

#82be00

HEX:

#fea901

HEX:

#6e6e6e

ADDITIONAL COLORS

85%

65%

45%

25%

15%

85%

45%

15%

#8abf26

#a5ce59

#c1dd8c

#dcecbf

#f1f7e5

#feb627

#ffd88c

#fff2d9

80%

60%

40%

20%

10%

#8b8b8b

#a8a8a8

#c5c5c5

#e2e2e2

#f0f0f0

TYPOGRAPHY

This is the standard main header A preamble with a snappy introduc8on that sets out the main argument for the piece. I'll cover the main ideas right here and hint at my conclusion without giving the game away completely.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita8on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed eget tellus nulla. Sed placerat accumsan venena8s. Nullam sed iaculis ipsum. Ut tempus egestas risus in fermentum. Sed felis urna, moles8e a sodales id, pre8um nec augue. A link presented in the body text, rutrum ut velit vel, gravida faucibus lacus. Nullam interdum facilisis diam id gravida. E8am ex nisi, lobor8s eu volutpat at, volutpat quis risus. Donec lectus urna, cursus ac nisl dapibus, fringilla dictum elit. Quisque in consectetur tortor. Quisque eu ves8bulum justo, at sodales nisl. Donec tortor ligula, dictum nec dui eu, ves8bulum ves8bulum leo.

This is the secondary header In id neque a mauris consectetur dapibus vel id sem. Sed ac accumsan nibh, id 8ncidunt magna. Donec non tortor in tortor pre8um maZs. In sagiZs ultrices odio. Sed augue tortor, pulvinar in mauris ac, auctor maZs felis. Proin feugiat ac ipsum in rhoncus. Ves8bulum dignissim gravida risus, sit amet hendrerit dui sollicitudin in.

Sed ullamcorper augue erat, vel efficitur purus sollicitudin ac. Nulla sed maximus sem, sit amet accumsan erat. Suspendisse gravida leo mi, nec ornare nisi malesuada ac. Sed faucibus nisi at hendrerit elementum. Nulla eu turpis quis metus tempus viverra. Sed malesuada tempus rutrum. Praesent at risus condimentum felis luctus maximus. Ut sagiZs sem eu rutrum consectetur. Ut vel massa non augue mollis sodales eu in eros. Cras lacinia ipsum vitae ligula finibus, eget ornare nulla feugiat. Mauris suscipit tellus id sapien tris8que blandit. Cras fringilla est vel varius faucibus. Donec a velit non ipsum ornare convallis pellentesque sed mi. E8am a ante nec quam hendrerit aliquam non eget dui. Sed pulvinar nisl ut fermentum pre8um. Sed massa justo, elementum ornare urna nec, pharetra facilisis metus.

This is the third header, the same size as for the alert box Cras imperdiet diam sed cursus porZtor. Ut laoreet euismod felis, eget luctus est auctor non. Phasellus tempus pulvinar elit fringilla venena8s. Integer nec dignissim justo, quis volutpat quam. Nulla est mi, fermentum non urna in, eleifend pre8um libero. E8am at leo at eros porZtor sollicitudin non quis felis. Proin ac gravida risus. Vivamus et scelerisque diam. Nunc et lacus non massa lobor8s ornare.

In id neque a mauris consectetur dapibus vel id sem. Sed ac accumsan nibh, id 8ncidunt magna. Donec non tortor in tortor pre8um maZs. In sagiZs ultrices odio. Sed augue tortor, pulvinar in mauris ac, auctor maZs felis. Proin feugiat ac ipsum in rhoncus. Ves8bulum dignissim gravida risus, sit amet hendrerit dui sollicitudin in.

This is the fourth and final header Sed ullamcorper augue erat, vel efficitur purus sollicitudin ac. Nulla sed maximus sem, sit amet accumsan erat. Suspendisse gravida leo mi, nec ornare nisi malesuada ac. Sed faucibus nisi at hendrerit elementum. Nulla eu turpis quis metus tempus viverra. Sed malesuada tempus rutrum. Praesent at risus condimentum felis luctus maximus. Ut sagiZs sem eu rutrum consectetur. Ut vel massa non augue mollis sodales eu in eros. Cras lacinia ipsum vitae ligula finibus, eget ornare nulla feugiat. Mauris suscipit tellus id sapien tris8que blandit. Cras fringilla est vel varius faucibus. Donec a velit non ipsum ornare convallis pellentesque sed mi. E8am a ante nec quam hendrerit aliquam non eget dui. Sed pulvinar nisl ut fermentum pre8um. Sed massa justo, elementum ornare urna nec, pharetra facilisis metus.

ALERT BOX

Op&onal header (if needed) for the alert box This is an area for content that has to be seen. It separates well from the other content with the striped orange border and the generous amount of white spacing inside.

LANDING PAGE BOXES - STAKEHOLDERS & LEGACY

STAKEHOLDERS

SMALLER LANDING PAGE BOXES - WITH TEXT

›

LEGACY

›

COURSES

TECHNOLOGY

›

Lorem ipsum dolor sit amet amor vinit omnia

Footer content

RESEARCH

BEAMLINES

›

Lorem ipsum dolor sit amet amor vinit omnia

LANDING PAGE - CIRCLES WITH ICONS

EXPERIMENTS

›

PEOPLE