Field notes

Components

Loading comments…

← Back home

Hermes01 / UI foundation

A usable default, not a decorative theme

Design system

A compact editorial foundation for data, decisions, and field guides. Routes begin with these tokens and primitives, then add domain-specific structure only when the content demands it.

01 / Tokens

A small vocabulary with clear jobs

--pg-color-cream-50#FFFDF7
--pg-color-parchment-100#FFF8EE
--pg-color-parchment-200#F7EADB
--pg-color-parchment-300#EBD9BF
--pg-color-paper-edge-400#D9C19F
--pg-color-ink-900#2F251C
--pg-color-ink-700#5F4A38
--pg-color-ink-500#8A7663
--pg-color-terracotta-500#A85B42
--pg-color-terracotta-300#E9B8A4
--pg-color-jade-500#5E8F7A
--pg-color-jade-300#B9D1C3
--pg-color-sunbeam-400#E2B45C
--pg-color-sunbeam-200#F8DFA8
--pg-color-border-warmrgba(116, 84, 55, 0.16)
--pg-color-text-primary#2F251C
--pg-color-text-muted#786858

02 / Typography

Three roles, not twelve text treatments

--pg-font-display

Manuscript Display

Literary voice for thesis, page titles, and section openers that should feel printed rather than rendered.

Newsreader, Cormorant Garamond, Iowan Old Style, Georgia, Cambria, 'Times New Roman', serif
--pg-font-sans

Atlas Sans

Readable interface type for navigation, forms, annotations, and dense component documentation.

Source Sans 3, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif
--pg-font-mono

Marginalia Mono

Tokens, states, measurements, keyboard hints, and tiny catalog labels in the margins.

IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace

03 / Layout

Use density to expose the decision surface

Header

Context, the decision, then the first useful control or metric. No promotional preamble.

Grid

Use the smallest responsive grid that preserves scanning: one column for a narrative, two for comparison, three or four for a catalog.

Rhythm
--pg-radius-note8px--pg-radius-folio16px--pg-radius-page24px--pg-radius-lantern32px--pg-space-dot4px--pg-space-line8px--pg-space-row12px--pg-space-folio16px--pg-space-spread24px--pg-space-margin40px--pg-space-desk72px--pg-motion-fast140ms cubic-bezier(0.2, 0.8, 0.2, 1)--pg-motion-illumination420ms cubic-bezier(0.16, 1, 0.3, 1)

04 / Primitive inventory

Build with named objects, not one-off card recipes

01

Button

Sunbeam action. Commit an intent, submit a form, trigger a workflow.

  • intent label
  • warm state halo
  • single dominant sunbeam primary
02

Card

Parchment folio. Group content, compare choices, hold a product object.

  • mono folio label
  • decision title
  • annotation metric
  • one action
03

Text Field

Ink line. Capture user input without breaking layout rhythm.

  • label
  • paper input
  • helper/error reserve
  • sunbeam focus ring
04

Select Menu

Atlas picker. Choose from constrained options with low cognitive load.

  • label
  • selected value
  • folded-corner chevron
  • floating folio menu
05

Checkbox

Seal toggle. Represent boolean choices, consent, filters, and row selection.

  • wax square
  • ink tick
  • direct label
  • optional helper
06

Modal

Lantern decision. Interrupt only when a contained decision must be made now.

  • amber scrim
  • lantern panel
  • decision copy
  • paired actions
07

Tabs

Ribbon markers. Switch between sibling views without leaving the current context.

  • tab row
  • active sunbeam underline
  • count marker
  • content panel
08

Data Table

Ledger grid. Scan records, compare metrics, select rows, and reveal risk.

  • sticky paper header
  • dense rows
  • mono metrics
  • terracotta risk cell
09

Badge

Wax seal. Compactly label status, category, priority, or risk.

  • pill container
  • semantic hue
  • short label
  • optional dot
10

Toast

Margin note. Confirm a completed action while preserving the user's flow.

  • parchment surface
  • result sentence
  • optional undo
  • exit motion