Open Hand.

The idea

1. 1Say the thing outright. The headline is the answer.
2. 2Show the structure. Rules, blocks and space. No washes and no soft cards.
3. 3Show the number. Big, exact, and with what it leaves out.
4. 4One marigold. It sits where your attention should go next, and nowhere else.
5. 5Stark in form, warm in words. We speak as friends, not as a bank.

Ink, paper and one marigold.

Marigold is the flower of offerings. Here it marks one thing at a time: the word that matters, the button to press, the dot in hand. Text on it is always ink. It is never used as text on light paper.

• Paperthe page
• Inktext, rules, dots
• Ink 2second-rank text
• Hairlight rules between rows
• Blocka quiet fill: a filter under the pointer, a button that is not ready
• Landland on the map
• Marigoldthe one accent
• Marigold pressedthe accent under a finger
• On marigoldtext on the accent

Two faces. Two weights.

A system grotesque (Helvetica Neue, then Arial, then the system sans) at heavy and regular does nearly everything. The system mono carries data and labels. No font files.

• Mega
  --fs-mega
  44 to 148px · heavy · −0.055emIt is free.
• Number
  --fs-num
  52 to 112px · heavy · tabular2,541
• XL
  --fs-xl
  32 to 68px · heavyCount it yourself.
• LG
  --fs-lg
  24 to 36px · heavySome listings ask for a fee.
• MD
  --fs-md
  18 to 22px · regularA kalyanamitta is a good Dhamma friend.
• Base
  --fs-base
  17px · regular · 1.5We talk every day. We keep a map of groups, temples and kalyanamitta around the world.
• Small
  --fs-sm
  15pxWarwick, United Kingdom
• Label
  --fs-xs
  12px · mono · caps · +0.06emFrom the old website · Not confirmed yet

A 4px step. Ten sizes.

• --sp-1 · 4px
• --sp-2 · 8px
• --sp-3 · 12px
• --sp-4 · 16px
• --sp-5 · 24px
• --sp-6 · 32px
• --sp-7 · 48px
• --sp-8 · 64px
• --sp-9 · 96px
• --sp-10 · 128px

The page is a 12-column grid inside an 80rem shell. Each section opens with a 2px rule and keeps its label in the first three columns.

Structure is drawn, not shaded.

• --rule-hair · 1px
  between rows
• --rule · 2px
  sections, boxes, buttons
• --rule-heavy · 6px
  the mark beside the row in hand
• --r-0 · 0
  --r-dot · 50%Square, except a dot. A dot is a place or a person.
• --shadow-hard
  4px 4px 0 inkOne shadow, hard. Only on the thing you press.

A button says what it does.

One marigold button on a screen, for the main thing to do. It lifts under the pointer and goes down under the finger. A dashed edge means it does not work yet, and the words beside it say why.

Rows, not cards.

A listing is a row you can scan: number, name, place, kind. Press it and it opens in place. When something needs a box, the box is a plain block with a 2px edge.

1. 027Cambridge Zen CenterCambridge, Massachusetts, United StatesGroup Zen · MahayanaMeets online
2. 141Wat Pah Santidhamma The Forest Hermitage WarwickWarwick, United KingdomTemple Theravada

   Wat Pah Santidhamma or The Forest Hermitage is a small peaceful Buddhist monastery after the style of the forest monasteries of N.E. Thailand but set in the heart…

   52.25, -1.62 · From the old website · Not confirmed yet

Ask one thing at a time.

A field is a 2px box. In focus it gains the hard shadow. A problem is said in words under the field, with a dashed edge. There is no red: a problem is not an alarm.

A tag states one fact.

Mono, capitals, a 1px edge. The fee tag is filled with ink, so that nobody can miss it. Traditions are plain mono text, because a row can have five of them.

Quick, with a small settle.

Four tempos and two easings. Things travel to their place and land a hair past it. Nothing loops except the colon of the clock. With reduced motion on, everything is simply there.

• Snap and settle

  --dur-settle 380ms · --ease-settlePlay

• Rows rise in turn

  1. Aloka Vihara
  2. Bodhi Tree Forest Monastery
  3. Cambridge Zen Center

  --stagger 28msPlay

• Numbers count

  2,541

  --dur-count 700ms · --ease-outPlay

• The accent moves to the one in hand

  --dur-settle · scaleNext

• A press goes down

  Press me

  --dur-press 90ms · 4px

• The highlighter

  It is free.

  --dur-settle · scaleX from the leftPlay

• --dur-press · 90msA press answers.
• --dur-snap · 180msSmall things change state: a tick box, a rule, a colour.
• --dur-settle · 380msThings travel and land: rows, the slab, the dots, the map.
• --dur-count · 700msNumbers count and bars grow.
• --ease-settlecubic-bezier(0.2, 1.38, 0.38, 1). Lands a hair past, then rests.
• --ease-outcubic-bezier(0.16, 1, 0.3, 1). Fast in, smooth out, no overshoot.

Short, literal, warm.

One idea in each sentence. No contractions. A Pali word is explained where it first appears. A number comes with what it does not cover.

• Begin your journey of discoveryFind a good friend in the Dhamma.
• Sign up now!Join for free.
• Teacher, mentor, guideKalyanamitta, a good Dhamma friend.
• Flexible pricing optionsSome listings ask for a fee. Each one says so.
• Oops! Something went wrong.The listings did not load. Reload the page to try again.