Open Sangha Foundation Join for free

Direction: Wat

The design language.

  1. A forest monastery’s quiet, in print: a pamphlet handed to you at the gate.
  2. Most of the page is warm paper and ink. Ochre, saffron-brown and forest green are used like pigment, a little at a time.
  3. One bookish serif does everything. Labels are tracked capitals, sections are numbered, rules are hairlines.
  4. Things arrive like a page being turned and settle like ink drying. Nothing bounces.
  5. The voice is short, literal and warm. It says what this is, what to do, and what costs money.

Colour

Paper, ink and three pigments.

Each swatch shows the light value on the left and the dark value on the right. The dark theme is the hall by lamplight: the primary button becomes the lamp.

  • Plaster / Hall floor

    --paper

    #F4EEE0 · #17120D

    Page ground

  • Lime wash / Lamp-lit teak

    --card

    #FBF8EF · #221A13

    Cards, fields

  • Shade / Rafters

    --sunk

    #EAE2CE · #100C08

    Bands, hover

  • Teak ink / Palm leaf

    --ink

    #2B2119 · #EDE2CC

    All reading text

  • Faded ink / Ash

    --ink-2

    #5F5244 · #B9AA90

    Notes, captions

  • Hairline

    --rule

    #D6CAB2 · #3A2F23

    Dividers, card edges

  • Heavy rule

    --rule-strong

    #A8987C · #6A5843

    Section rules, field edges

  • Ochre robe

    --ochre

    #C0822A · #D9962F

    Marks and rules, never text

  • Saffron-brown / Lamp saffron

    --saffron

    #8A4B14 · #E3A857

    Labels, numerals

  • Forest green / Leaf by lamp

    --forest

    #2E4A37 · #9DBD9B

    Links, group marks

  • Forest green / The lamp

    --action

    #2E4A37 · #E3A857

    Primary button

  • Lime wash / Soot

    --action-ink

    #FBF8EF · #1B140C

    Text on the primary button

  • Wet ink

    --wet

    #B05A14 · #FFC670

    Ink before it dries, focus ring

  • Fee ground

    --fee

    #F1DFB3 · #3B2A10

    Fee tag and notice

  • Fee ink

    --fee-ink

    #6A3F08 · #F0C987

    Text on the fee ground

  • Chart sea

    --chart-sea

    #F7F2E6 · #130F0A

    Water on the chart

  • Chart land

    --chart-land

    #E4D8BC · #2C2218

    Land on the chart

  • Coast line

    --chart-coast

    #7A6A52 · #8A765C

    Engraved coast

Light: plaster by day

Find a sangha

Temples, monasteries, groups and retreats around the world.

Join for freeOpen the map

Dark: the hall by lamplight

Find a sangha

Temples, monasteries, groups and retreats around the world.

Join for freeOpen the map

Type

One serif, already on the device.

--serif Iowan Old Style, then Palatino, Charter, Georgia. --mono is for token names only. Two weights, 400 and 700. Numerals are old-style in text and lining in tables.

--fs-h1
38 to 76px · 1.04

Practice the Dhamma together.

--fs-h2
26 to 40px · 1.16

People and places in the Dhamma.

--fs-h3
21px · 1.16

Find a kalyanamitta

--fs-lead
19 to 23px · 1.5

Open Sangha is where people who follow the Dhamma meet.

--fs-body
17px · 1.62

A kalyanamitta is a good Dhamma friend. You can talk with one, one to one.

--fs-note
16px

Some listings ask for a fee. Each of those says so on its card.

--fs-small
14px

Warwick, United Kingdom

--fs-label
12px · tracked 0.13em

A Buddhist community. Free to join.

--fs-numeral
36 to 64px · italic

1 2 3 4

Space, corners, shadow

A 4px step. Paper has corners.

--s-0 · 2px
--s-1 · 4px
--s-2 · 8px
--s-3 · 12px
--s-4 · 16px
--s-5 · 24px
--s-6 · 32px
--s-7 · 48px
--s-8 · 72px
--s-9 · 112px

Reading measure --measure 34rem. Page width --shell 72rem. Side gutter 16 to 48px. Smallest touch target --tap 44px.

0
2px
4px
round

--r-1 cards and tags, --r-2 buttons and fields, --r-round map marks only.

--shadow-key
--shadow-card
--shadow-lift

Shadows are paper lying on paper: a hard edge below, a soft shade under it. A button’s edge closes when you press it.

Parts

Buttons, cards, fields, tags.

Buttons

Find a kalyanamitta

A button is a plain command. One primary button on a screen.

Chips and tags

Bhikkhunis (nuns) Meets online Asks for a fee Group Temple Retreat

Listing card: an index card

TempleWarwick, United Kingdom

Wat Pah Santidhamma The Forest Hermitage Warwick

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…

A real listing from the directory. The ochre line under the kind is the only colour on the card.

Notices

Fields

Contents and ledger

Groups
1,930
Temples
391
All listings
2,541

Numbers are set like a contents page, with dot leaders. No tiles, no gauges.

Motion

Four tempos, two easings.

--t-press a key giving
110ms
--t-quick hover, small states
240ms
--t-turn a page turned
620ms
--t-dry ink drying, a rule drawn
1400ms

--ease-settle for anything that arrives. --ease-even for colour and ink. The chart travels to a new window in 1100ms. With reduced motion set, everything is simply in place.

Page turn

Things rise and settle,

one after another, 80ms apart.

Ink drying

27 listings match

A card dealt, a card lifted

Group

Hover or press me

A slip of paper

For a press that needs an answer in words.