Jobs

Style guide

The CayoHub look, shared with the database access portal. Class names under each example.

Colours

Ground and lines

--ground
--surface
--tint
--line
--line-soft
--field-line

Text and brand

--ink
--muted
--accent
--top
--sky
--sun

Status

--ok-bg
--ok-ink
--warn-bg
--warn-ink
--bad-bg
--bad-ink
--chip-bg
--chip-ink

Charts

--chart-up
--chart-down
--chart-death
--chart-move
--code-bg
--hl-string

Type

Bricolage Grotesque for headings and big figures, Figtree for everything else. Sentence case.

Hero heading

.hero h1 · 52px, home only

Page heading

.page-head h1 · 32px

Card heading

.card h2 · 24px

12,480

.big · a figure

Small label above a group

.label

Body text, 16px. A link and inline code.

A lead line under a heading.

.lead · .small-text · .muted · .hint

Buttons

Apply Secondary Plain Remove Not yet

.btn · .btn.secondary · .btn.plain · .btn.danger · .btn.disabled · .btn.wide · .actions

Chips and notes

Open until filledApply by 1 Dec 2026 WithdrawnPostdoc DraftNewOutline

.chip.ok · .chip.warn · .chip.bad · .chip.neutral · .chip.dashed · .chip.dark · .chip.outline · .chip.wrap

Saved. The change shows on the next page load.
A caution that needs reading before going on.
That address doesn't look right.
A neutral aside, such as a visa note.

.note.ok · .note.warn · .note.bad · .note.plain

Internships and training opportunities are centered on training and provide support towards stipends and possibly living costs.

Internships and training say this, in these words, under their section heading and at the top of each of their pages (_training_note.html). No pay anywhere on the site, not even in examples.

Cards and columns

A card

Status

The main column, at least 560px wide. Cards stack in it with 16px between them.

Institution
Arizona State University
Location
Tempe, Arizona
Appointment
Full time

.cols > .main · .card · .card-head · .facts · .sep

PositionStatusPosted
Post-Doctoral AssociateNew York UniversityOpen23 Oct 2026
Researcher Senior LeadUniversity of Alabama at BirminghamOpen—
Functional genomics postdocVanderbilt UniversityClosed1 Oct 2026

.card.flush · .tabs · .toolbar · .filters · .pill · .table-wrap · td .sub

Forms

required

Work
A hint under a field.
More detail, folded away

Opened with a click; no script needed.

.formgrid · .field · .field.full · .choice · .check · .req · .hint

Code

from datetime import date
# every opening, still taking applications first
rows = openings.load("openings.toml", today=date(2026, 11, 5))

pre · .hl-k · .hl-f · .hl-a · .hl-s · .hl-n · .hl-c

Pop-up form

Open the pop-up

details[data-popover] · [data-close] · (site.js)

Photo hero

On the home page only: see it there. A heading with short lead lines (or, on the portal, up to two figures) sits on the left, where the photo is shaded dark; the macaque on the right stays clear.

.hero · .hero-lead · .tiles · templates/_hero.html