Jobs at 

ASTRON logo
Jobs at ASTRON

Style Guide

This page outlines the current styles and standards for the Jobs at ASTRON website.

Colors

An overview of this site's brand colors.
Colors & Shades
Transparencies
primary
Primary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
secondary
Secondary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
accent
Accent
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
base
Base
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
shade
Shade
Ultra Light
Light
Medium
Dark
Ultra Dark
primary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
secondary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
accent
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
base
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
shade
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90

Typography

Below is an overview of responsive typography sizes and weights for this site. These are computed from a base size and a mathematical scale.
Headings
H1 (--xxl)

Heading 1 Regular

Heading 1 Medium

Heading 1 Bold

H2 (--xl)

Heading 2 Regular

Heading 2 Medium

Heading 2 Bold

H3 (--l)

Heading 3 Regular

Heading  Medium

Heading 3 Bold

H4 (--m)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5 (--s)
Heading 5 Regular
Heading  Medium
Heading 5 Bold
H6 (--xs)
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Body Text
BODY TEXT (--m)
Text m Regular
Text m Medium
Text m Bold
SMALL TEXT (--s)
Text s Regular
Text s Medium
Text s Bold
XTRA SMALL TEXT (--xs)
Text xs Regular
Text xs Medium
Text xs Bold
Examples

Heading 1 (H1)

This is large text. 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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 2 (H2)

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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 3 (H3)

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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 4 (H4)

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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 5 (H5)
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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 6 (H6)
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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Buttons

Solid and outline buttons are available across all color sets including black and white.
BUTTONS ON LIGHT BACKGROUND
Primary
Primary Outline
SecondarySecondary Outline
Accent
Accent OutlineBase
Base Outline
BUTTONS ON DARK BACKGROUND
Primary
Primary Outline
SecondarySecondary Outline
Accent
Accent OutlineWhite
White Outline
BUTTON SCALE
Button XS
btn--primary / btn--xs
Button S
btn--primary / btn--xs
Button M
btn--primary / btn--m
Button L
btn--primary / btn--l
Button XL
btn--primary / btn--xl
Button XXL
btn--primary / btn--xxl

Widths

There are six values you can use to control element width. They're automatically responsive.
--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-xxl

Section Padding

Padding for sections is responsive and based on a multiplier of the core spacing system.
None
XS
S
M
L
XL
XXL

Spacing

There are six levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

Element Padding

Here are the six levels of spacing visualized as padding.

Card

This is a card with XS padding. Its content is pretty close to the edges.

Card

This is a card with S padding. It has a little bit tighter padding.

Card

This is a card with M padding. It has standard breathing room.

Card

This is a card with L padding. It has extra breathing room.

Card

This is a card with XL padding. It has significant breathing room.

Card

This is a card with XXL padding. Avoid using this in a confined space.

Shadows

There are three multi-layer box shadows to choose from.
Box shadow M
Box shadow L
Box shadow XL

Border radius

There are six border radius values calculated from a base size and a mathematical scale.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL

Vacancies

Upcoming vacancies

Systems Engineer

We are continuously developing new, cutting-edge instruments for radio astronomy and are working on major upgrades of our current telescopes. As a Systems Engineer, you will oversee the instrument development process.

SDC Software Engineer

For our ongoing Science Data Centre (SDC) development, we are seeking a software engineer to strengthen Team Rainbow, one of our highly esteemed scrum teams. At the SDC, we strive to maximize the scientific impact of our world-leading instrumentation portfolio.

LOFAR Software Engineer

For the continuous development of our LOFAR telescope, we are looking for a software engineer to strengthen one of our SCRUM teams.

Bell Burnell Fellow

Bell Burnell Fellow will represent and reflect all of ASTRON’s foundational values as it continues its 75 year leadership in radio astronomy discovery and innovation. The fellowship provides an outstanding opportunity for a scientist to pursue innovative research and development in an institute that spans the entire spectrum of radio astronomy expertise – from development, to operation, to science frontiers. 

Word from a staff member
Boudewijn Hut
Junior commissioning engineer
During my graduation project for the study of astronomy, I had my first encounter with ASTRON. At that time I got the chance to make an interesting thesis I seized the opportunity immediately! After my studies I started to work at ASTRON.
Read more

@astron

chevron-down