Live preview
Vocation homepage: a dark navy page covered by a network of blue points joined by thin lines, a floating pill navigation with a Post a role button, and a translucent panel carrying the white serif headline A job description should describe the job, a line on salaries and a blue-outlined Browse open roles button
17 / ASTRO THEME

Vocation

For listings that say what the job pays.

  • Job board
  • Recruitment
  • Editorial

The seventeenth Quaeris Design release. A job board carrying sample listings with their pay, separate pages for employers and candidates, partner companies, free resources, a filterable search and a journal — sixteen routes, with the whole demo live and open to inspection.

MEASURED FROM THE DEMO
5.5 KB
JavaScript
16
Indexable routes
0
Blocking stylesheets
2
Font families
WebP
Images
Astro 7.3
Built with

Every figure came from astro-design-iacompagny.pages.dev. Open it and check.

One published website. VAT included; the studio licence covers client work. 14 days to withdraw, until the first download.

THE BRIEF

What it is for, and who it suits.

A visual direction for a job board that reads like a printed careers journal. It opens on a night hero where a live graph links every point to its nearest neighbours, then turns to warm parchment, hairline rules and Fraunces at weight 400 on its optical-size axis, with one signal blue for actions and figures. The one thing that moves all the time is the argument itself: matching people to roles is a nearest-neighbour problem, so the hero draws one.

  • Job boards that want to look like a publication rather than a marketplace
  • Recruiters and agencies that publish salary ranges
  • Careers sites for companies that hire in the open
  • Editorial projects about work, pay and hiring
THE PAGE SET

Routes you get, and where they come from.

Every route below is generated at build and served as a static file.

Pages

Written once, edited in place.
  • Home
  • Roles
  • For employers
  • For candidates
  • Partners
  • Resources
  • Journal
  • Search
  • About
  • Create a profile
  • Contact
  • Legal notice
  • Site map

Collections

One Markdown file becomes a route, an index entry and a listing.
  • Article × 3

System

Generated, never hand-maintained.
  • 404
  • sitemap.xml
  • robots.txt
  • site.webmanifest
DESIGN NOTES

The decisions behind the look.

01

The hero animation is the product, drawn.

Points drift across the night hero, give way to the cursor and draw a line to every neighbour within reach — the same nearest-neighbour logic that matches a profile to a role. It is a plain 2D canvas, bounded to its section, paused when it scrolls off screen or the tab is hidden, and replaced by a single still frame under reduced motion.

02

The figures make the case.

Below the hero the page turns to parchment and argues in numbered plates: one profile and the nine roles nearest it, then what happens to a thousand applications, drawn to scale. Their lines draw themselves as they come into view, a manifesto lights up word by word with the scroll, and a timeline fills step by step down what happens after you apply.

03

Complete with JavaScript off.

Every rule that hides something before it appears is scoped to a class a blocking script adds before first paint. Without JavaScript the page is a finished static document, hero and navigation included. Under reduced motion the figures and the timeline render in their final state rather than as a shortened animation.

04

Placeholders are marked, not invented.

The listings are labelled as samples, the figures as illustrative and the partner companies as fictional. The legal page leaves the registration number, host and governing law empty, because a plausible invention there would be worse than a gap. Searching the source for illustrative, sample and before launch lists everything to replace.

PALETTE
  • Night #10141c The hero, behind the graph
  • Parchment #fefffc Page ground below the hero
  • Charcoal #444141 Body text
  • Ash #646464 Captions and secondary text
  • Signal blue #41a1cf The graph, actions, focus and the timeline
  • Cerulean #0081c0 The one saturated panel
TYPEFACES
Display
Fraunces Variable, weight 400 only, optical size up to 120
Interface and body
Inter Weights 400, 500 and 600, slight negative tracking
WHAT SHIPS WITH IT

Know what you’re getting.

A good-looking screenshot is the beginning. The details help you choose.

01 / THE PAGES

A view of the whole site.

Every release lists its page set, from the homepage to the article, author and category templates your project actually needs.

Page list with each release
02 / THE EXPERIENCE

Every screen matters.

Desktop and mobile layouts, navigation, focus states and interactions, checked at the widths people actually use rather than the one the screenshot was taken at.

How customisation works ↗
03 / THE HANDOVER

The details, before you buy.

Source files, installation requirements, licence and support terms are published on the theme page so you can decide before you spend anything.

Exact package with each release
PRICING

A clear price. A clear package.

Pick the design that fits your project. One licence covers one published website; building for clients is the studio licence.

INDIVIDUAL THEMES ON SALE

Find your fit.

€59 a theme

One licence, one published website. Work you deliver to clients is the studio licence: €399 for the whole collection, and a year of everything released after it.

A theme licence
One published project
Client work
Studio licence
Updates & support
Stated per theme
THIS THEME

Everything above, in one download.

Vocation, as the complete Astro source. Change anything, deploy it anywhere static, and keep it.

One published website. VAT included; the studio licence covers client work. 14 days to withdraw, until the first download.

ELSEWHERE IN THE COLLECTION

Three more directions.