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.
The posting says applications closed on 31 Oct 2026.
That address doesn't look right.
A neutral aside, such as a visa note.

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

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
Salary
$65,000–$75,000

.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